44

Is there anything that can be done to autoscale the fonts for older answers on SO that were formatted to fit within the then 90 characters available before scrollbars appeared?

Much care was taken to format code answers so they displayed nicely within the window without triggering scrollbars. (at least for C/C++) I know I had even set a right-margin display in my code editor to ensure that answers would match the available space. With the font change, the number of characters allowed was reduced from 90 to 82 and all of that formatting effort was lost.

I'm not against the change, but after working with it for almost two weeks, that is the one thing that would be nice to fix if possible. I don't do much web formatting, but I did read about font-scaling that was added not too terribly long ago that may help. Something like "if the existing code lines are less than or equal to 90 chars, scale the mono font to fit withing the available space without scrolling"?

I'm not sure if that is possible, but that would be nice to have to recover the look of older answers. (at least when viewed from Linux through Firefox, it may not be an issue with other browsers). So I thought I would put this out for discussion to see if there was anything that could be done that wasn't efficiency or manhour prohibitive.

15
  • 5
    Note that the monospace font is also OS-dependent now, so Linux users may see differently compared to Windows or Mac users.
    – Andrew T.
    May 22, 2021 at 8:44
  • Yes, I thought about that. So at least on Linux with Firefox you see the reduction from 90 to 82 chars before wrap. Another note is there is very little difference between characters like 6, 9 and 0 because the percentage of the glyph that holds the "tail" of the 6 or 9 is only about 20% of the height. The other 80% is the 0 part making them all look like slightly squashed versions of 0. May 22, 2021 at 10:10
  • 6
    Maybe useful if you could add some direct Link(s) to some Example(s)...
    – chivracq
    May 22, 2021 at 15:51
  • 10
    If implemented, how long would it be before the counter-question "Why does the code in these two questions look different?" appears? Visual constancy between questions is important to the overall look-and-feel of the site. If you want a smaller font for the code in some questions, shouldn't the code font be reduced in size for all questions? May 22, 2021 at 16:00
  • Alright, here is an Example already (for the imacros Tag that I answer), where I'm "pretty sure" my 2x EVAL() Statements (Solution Part of the Answer) would fit on the "Screen" without requiring any Horizontal-Scrolling... (which I also try to avoid/minimize as much as possible)...: stackoverflow.com/a/67473639/3799241
    – chivracq
    May 22, 2021 at 17:36
  • 2
    Indeed, @chivracq, that code block has no scrollbars on my Windows10 laptop when switching the font to Consolas. It has the scrollbar with the Liberation Mono font, which for some reason is installed on my laptop and has precedence over Consolas.
    – trincot
    May 22, 2021 at 18:37
  • 9
    I don't think this is a reasonable request. The width of code blocks has changed multiple times in SO history. Formatting code to avoid scrollbars was never a good idea - and I admit I failed this advice before. I doubt SO designers will ever give us some sort of guarantee that always at least N (say, 80) characters will be visible in a code block. And it's hard to do so with CSS anyway, without using a pixel-accurate layout.
    – Bergi
    May 22, 2021 at 23:39
  • 1
    I'm not sure we are staying on track here. No one asked for a guaranteed minimum. The discussion was directed at exploring whether there was a way to regain the loss of width due to the font change with some type of font auto-scale so that answers formatted to not generate scroll-bars with the old font are displayed the same with the new. While no scroll-bars isn't a hard target, it does make a difference to the readability of answers and whether the user has to manipulate the screen to read the comments, etc... As notes, I'm not saying this is possible/doable, but it is worth exploring. May 23, 2021 at 2:30
  • Yep, easy Solution: Make the container DIV use the full BODY Width like the HEADER and the FOOTER do, instead of leaving 2 empty (Vertical) Margins (both on the Left + Right) of each 3cm = 6cm of "lost Space". (For SO...!, => strangely enough, that Margin is "only" 2.5cm x2 = 5cm on Meta...) - And don't make the sidebar DIV wider, it's already more than wide enough...! - Then a Code Block could easily display 100 Chars... (Code Blocks in "Standard" 'phpBB' Forums (v3.x) can display 116 Monospace Chars.)
    – chivracq
    May 23, 2021 at 4:23
  • 1
    That would be amazing. I was beginning to think this was just impossible. I tested further at different zoom levels in firefox -- and of course, that changes the number of characters before the scroll-bars generate as well. If you all can pull a rabbit out of the hat that will work, and isn't bandwidth or load prohibitive -- that would be a big improvement in making sure all visitors are presented with the same thing (to the greatest reasonable extent possible) Nothing will ever be exact, but at least consistent in height and width for the most part. May 23, 2021 at 5:27
  • 12
    Can We Remove Unnecessary Title-Casing?
    – Ian Kemp
    May 23, 2021 at 8:50
  • Scroll bar prevention is even harder on tablets. Just sayin'.
    – O. Jones
    May 23, 2021 at 12:13
  • 1
    I question whether formatting to avoid scrollbars was ever a good idea. Definitely not some widespread practice I'm aware of.
    – qwr
    May 24, 2021 at 9:34
  • Which font change are we talking about? I've been around for close to a decade now and I can't remember ever having 90 columns visible in codeblocks in Chrome running on either Ubuntu or macOS. On machines I use the number has always been just a little above 80.
    – Mark Amery
    May 24, 2021 at 11:27
  • It's much easier/faster to just use a userscript to change the font and font-size back to what they were.
    – TylerH
    Sep 13 at 16:47

1 Answer 1

27

Not really an Answer, but I wanted to do/show some "Testing"...

More Results welcome, still "missing" Chrome (CR90) + Win10 & Linux for example...
=> Post in a Comment and I'll include your Results (+ I will add an extra Box if needed).

  • Make sure to mention your FCI (Full Config Info), => Browser Version + OS/Distro Version.
  • Make sure also to report your Results for Zoom Level=0 for your Browser. (=> 'Ctrl^0')
  • Check also maybe if the Hide left navigation Setting [disabled/enabled] (in 'Preferences') makes a "Difference"...

Results Summary:

  • [77/78]: Opera: Limit at 77 Chars, Scrollbar appears at 78 Chars. (Opera v76.0 + Win10). [With Hide left navigation Setting disabled.]
  • [78/79]: Safari (+ macOS): Limit seems to be at 78 Chars for NO Scrollbar. => Scrollbar appears at 79 Chars already. (Safari v14.1 + macOS v11.3.1).
  • [80/81]: Firefox (+ Linux Gentoo): Limit at 80 Chars, Scrollbar appears at 81 Chars. (FF86 + Linux Gentoo).
  • [81/82]: Chrome (+Win10 & macOS): 81 Chars seems to be the Limit for NO Scrollbar for most/all Users on Chrome. => Scrollbar appears at 82 Chars. (Need more Results for CR as I only tested myself with CR76 (+ Win10_PRO, Zoom Level=0, Not logged in (=> Hide left navig disabled), and other Users didn't "confirm" they were using CR90.) // Limit for CR90 seems to be different on Win7.)
  • [82/83]: Firefox: 82 Chars seems to be the Limit for NO Scrollbar for most Users on Firefox (FF[55-88]) + Win10, macOS & Linux (except Ubuntu). => Scrollbar appears at 83 Chars. [Same Behaviour with Hide left navigation Setting enabled or disabled. (FF55) + Zoom Level=0.]
  • [82/83]: Firefox (+ Ubuntu): Limit also at [82/83] in FF88 + Ubuntu MATE 20.04 (+ Zoom Level=0), which conflicts with the "except Ubuntu" from previous Line...
  • [88/89]: Opera: Limit at 88 Chars, Scrollbar appears at 89 Chars. (Opera v76.0 + Win10). [With Hide left navigation Setting enabled.]
  • [91/92]: Preview Mode in FF: Scrollbar "only" appears at 92 Chars, but this is not correct...
  • [90/91]: Chrome (+ Win7): Limit at 90 Chars, Scrollbar appears at 91 Chars. (CR90 + Win7) [Zoom Level=0 + Hide left navigation Setting enabled or disabled makes no Difference.]
  • [92/93]: Firefox (+ Win7 & Ubuntu): Limit seems to be at 92 Chars for NO Scrollbar. => Scrollbar appears at 93 Chars for FF88 + Win7 & Ubuntu. (Might need to "confirm" those Results with "Zoom Level=0".)
  • [105/106]: Firefox + SamLiew's 'SO Wider Screen' UserScript: Limit at 105 Chars, Scrollbar appears at 106 Chars...! (FF116 + Win10) => 105 Chars visible in Code Block + 92 Chars while typing in the 'Answer' Field. [With Hide left navigation Setting enabled.] [Related Question/Thread on 'Meta': "Increase window size for answering questions?" (Might get roomba'd...)]
  • [109/110]: Pale Moon: Scrollbar appears "only" at 110 Chars...! (PM v26.3.3 + Win10), but the Font is not Monospace. (Then it would be 200 "iiiiiiii" or 70 "MMMMMMMWWW"...!) [With Zoom Level=0, and Hide left navig Setting disabled. (Cannot be enabled in PM26...)]

Box_77:

12345678901234567890123456789012345678901234567-50-23456789012345678901234567
        10        20        30        40        50        60        70
=> 77 Chars.
  • Limit (= No Scrollbar) for Opera (v76.0) + Win10. [With Hide left navigation Setting enabled.]

Box_78:

12345678901234567890123456789012345678901234567-50-234567890123456789012345678
        10        20        30        40        50        60        70
=> 78 Chars.

Results:

  • Limit (= No Scrollbar) for Safari (v14.1) + macOS v11.3.1.
  • Scrollbar appears using Opera (v76.0) + Win10. [With Hide left navigation Setting enabled.]

Box_79:

12345678901234567890123456789012345678901234567-50-2345678901234567890123456789
        10        20        30        40        50        60        70
=> 79 Chars.

Results:

  • Scrollbar already present on Safari (v14.1) + macOS v11.3.1.

Box_80:

12345678901234567890123456789012345678901234567-50-23456789012345678901234567890
        10        20        30        40        50        60        70        80
=> 80 Chars.

Results:

  • Limit for NO Scrollbar on FF86 + Linux Gentoo.

Box_81:

12345678901234567890123456789012345678901234567-50-234567890123456789012345678901
        10        20        30        40        50        60        70        80
=> 81 Chars, no Scrollbar for "everybody"...? Nope, apparently...!

Results:

  • No Scrollbar in CR76 + Win10_PRO.
  • Scrollbar appears on FF86 + Linux Gentoo.

Box_82:

12345678901234567890123456789012345678901234567-50-2345678901234567890123456789012
        10        20        30        40        50        60        70        80
=> 82 Chars.

Results:

  • Scrollbar in CR76 + Win10_PRO, + other Configs using Chrome... (Not mentioned, but probably using CR90, + macOS.)
  • No Scrollbar in FF v55.0.3 + Win10_PRO (+ Zoom Level=0), + other Configs using Firefox... (FF88 + openSUSE/Ubuntu/Manjaro Linux.) [Same Behaviour with Hide left navigation Setting enabled or disabled. (FF55)]

Box_83:

12345678901234567890123456789012345678901234567-50-23456789012345678901234567890123
        10        20        30        40        50        60        70        80
=> 83 Chars.

Results:

  • Scrollbar triggered...! ... At least in FF v55.0.3 + Win10_PRO. + other Configs using Firefox: FF88 + openSUSE/Manjaro Linux.
  • Limit at [82/83] on FF88 + Ubuntu MATE 20.04 + Zoom Level=0.

Box_88:

12345678901234567890123456789012345678901234567-50-2345678901234567890123456789012345678
        10        20        30        40        50        60        70        80
=> 88 Chars.

Results:

  • No Scrollbar using Opera (v76.0) + Win10. [With Hide left navigation Setting enabled.]

Box_89:

12345678901234567890123456789012345678901234567-50-23456789012345678901234567890123456789
        10        20        30        40        50        60        70        80
=> 89 Chars.

Results:

  • Scrollbar appears using Opera (v76.0) + Win10. [With Hide left navigation Setting enabled.]

Box_90:

12345678901234567890123456789012345678901234567-50-234567890123456789012345678901234567890
        10        20        30        40        50        60        70        80        90
=> 90 Chars.

Results:

  • Limit with NO Scrollbar for CR90 + Win7. [Zoom Level=0 + Hide left navigation Setting enabled or disabled makes no Difference.]

Box_91:

12345678901234567890123456789012345678901234567-50-2345678901234567890123456789012345678901
        10        20        30        40        50        60        70        80        90
=> 91 Chars.

Results:

  • No Scrollbar in Preview Mode using FF55 + Win10_PRO. (But the Scrollbar does appear when posting, as the "real" Limit is actually at 82 Chars!)
    => Preview Mode is inaccurate by 9 Chars...!
  • Scrollbar appears for CR90 + Win7. [Zoom Level=0 + Hide left navigation Setting enabled or disabled makes no Difference.]

Box_92:

12345678901234567890123456789012345678901234567-50-23456789012345678901234567890123456789012
        10        20        30        40        50        60        70        80        90
=> 92 Chars.

Results:

  • Scrollbar gets triggered in Preview Mode. (Using FF v55.0.3, Win10_PRO_x64.)
  • No Scrollbar using FF88 + Win7.
  • (Still) no Scrollbar using FF88 + Ubuntu. (Not mentioned when it appears...) <=> Conflicts with User @Peter Mortensen reporting "clearly" Limit at [82/83] on FF88 + Ubuntu MATE 20.04 + Zoom Level=0.

And a few extra Boxes as the "Results" seem to be quite different for different Users, using different Browsers + OS'es...

Box_93:

12345678901234567890123456789012345678901234567-50-234567890123456789012345678901234567890123
        10        20        30        40        50        60        70        80        90
=> 93 Chars.

Results:

  • Scrollbar appears on FF88 + Win7.

Box_94:

12345678901234567890123456789012345678901234567-50-2345678901234567890123456789012345678901234
        10        20        30        40        50        60        70        80        90
=> 94 Chars.

Box_95:

12345678901234567890123456789012345678901234567-50-23456789012345678901234567890123456789012345
        10        20        30        40        50        60        70        80        90
=> 95 Chars.

Box_100:

12345678901234567890123456789012345678901234567-50-234567890123456789012345678901234567890123456-100
        10        20        30        40        50        60        70        80        90       100
=> 100 Chars.

Box_105:

12345678901234567890123456789012345678901234567-50-234567890123456789012345678901234567890123456-100-2345
        10        20        30        40        50        60        70        80        90       100
=> 105 Chars.

Results:

  • Still no Scrollbar in FF116 + Win10_PRO. [Need to use SamLiew's 'SO Wider Screen' UserScript for this behaviour...!]

Box_109:

12345678901234567890123456789012345678901234567-50-234567890123456789012345678901234567890123456-100-23456789
        10        20        30        40        50        60        70        80        90       100
=> 109 Chars.

Results:

  • Still no Scrollbar in PM v26.3.3 + Win10_PRO (+ Zoom Level=0). (Font is NOT Monospace.)

Box_110:

12345678901234567890123456789012345678901234567-50-234567890123456789012345678901234567890123456-100-234567890
        10        20        30        40        50        60        70        80        90       100       110
=> 110 Chars.

Results:

  • Scrollbar appears in PM v26.3.3 + Win10_PRO (+ Zoom Level=0). (Font is NOT Monospace.)

Box_150:

12345678901234567890123456789012345678901234567-50-234567890123456789012345678901234567890123456-100-234567890123456789012345678901234567890123456-150
        10        20        30        40        50        60        70        80        90       100       110       120       130       140       150
=> 150 Chars.

... And I'll include the Comment I posted earlier which "triggered" this Testing... (=> probably related to the smaller Margin on Meta... => Hum, nope then, with "extra" Problem that the Preview Mode is inaccurate by 9 Chars...):

Yep, easy Solution:
Make the container DIV use the full BODY Width like the HEADER and the FOOTER do, instead of leaving 2 empty (Vertical) Margins (both on the Left + Right) of each 3cm = 6cm of "lost Space". (For SO...!, => strangely enough, that Margin is "only" 2.5cm x2 = 5cm on Meta...)

And don't make the sidebar DIV wider, it's already more than wide enough...! - Then a Code Block could easily display 100 Chars...

(Code Blocks in "Standard" 'phpBB' Forums (v3.x) can display 116 Monospace Chars.)

But hum, the Layout is also quite different on CR76 (not logged in):
The container DIV does use the whole Width of the BODY with a content DIV shifted to the Right, and the "remaining" 5cm are used on the Left by a left-sidebar DIV for some "basic" Navig (Home/Public/Tags/Users) and some 'Teams' Ad.


Last Addition/Edit: [2023-09-13] Box/Results added for 105 Chars, related to some other Thread on 'Meta'.

20
  • 2
    With openSUSE and Firefox, I generate scroll-bars at 82 chars where before it was 90 chars. Here is an answer from tonight I had to go back and reformat twice to prevent scroll bars, e.g. Dynamically allocated string in dynamic structure array(seg fault) I don't know if Gtk+3 plays a role, but the edit font looks huge when I am editing text. Really strange. As mentioned, I set a vertical line in my edit window to ensure scroll-bars are not generated (did that for years at 90). I did what you did as far as measuring most of that is lost now. May 23, 2021 at 5:17
  • 3
    macOS Chrome, every one of the boxes has a scroll bar. And anything beyond 80 characters should not rely on or require any other modifications for compatibility. It was a mistake to ever go past 79 anyway. May 23, 2021 at 6:47
  • Hum, yep indeed @DanielWiddis, same Result in Win10 + CR76 with the "82-Chars" Box, => I've added a Box with 81 Chars and I don't get the Scrollbar in Chrome for that one... (But I'm using an "old" Version of CR (v76), "current" Version (2021-05) is CR90...)
    – chivracq
    May 23, 2021 at 7:26
  • 1
    FF on Ubuntu with Windows fonts installed. Not seeing a single scrollback in this post. May 23, 2021 at 8:13
  • 1
    FF88 in Windows 7, no scrollbars, the 92-width blocks seems to be right on the edge May 23, 2021 at 8:17
  • 1
    For me (FF88 on Manjaro Linux) I get the scrollbar from 83 up.
    – Artemis
    May 23, 2021 at 9:54
  • 1
    This in Opera on Windows 10. It looks as though mine allows for the odd number of 89 characters before the horizontal scrollbar appears.
    – Scratte
    May 23, 2021 at 10:37
  • 1
    @chivracq Scrollbar for 81 on macOS Safari. Cuts off the "1" and trailing border, suggesting either 80 or 79 is required there. No scrollbar at 81 in macOS Chrome. May 23, 2021 at 15:24
  • 2
    @chivracq Wow. There's even a scrollbar at 79, although it basically only scrolls a single pixel. All the text is visible at 80, the scrollbar just hides border whitespace. Safari Version 14.1 (16611.1.21.161.6) / macOS 11.3.1. May 23, 2021 at 16:07
  • 1
    @DanielWiddis That was true for me too. Turned out that 89 is still one too many on Opera version 76.0.4017.107 (latest version :-) When squinting one can see that there's ever slightly more space on the left compared to the right side of the numbers :) I see the same scrollbar when I turn my personal CSS styles off (including the font back to Ariel).
    – Scratte
    May 23, 2021 at 16:32
  • 1
    I noticed that the above limits of 88/89 apply to me when my preference "Hide left navigation" is enabled. When I disable it I get horizontal scrollbars on 78 (Don't mind the glitter, it's a user script :-). Basically the left sidebar takes away 11 characters for me.
    – Scratte
    May 23, 2021 at 17:53
  • 1
    At the default zoom level, 82 is also the limit for Firefox 88.0.1 (current) on Ubuntu MATE 20.04 (Focal Fossa) with Cinnamon as the window manager (that is, it is probably not much MATE). At the highest zoom level before the right-hand panel disappears (six Ctrl + "+" from the default), I have scroll bars for all of them. May 24, 2021 at 15:27
  • 1
    Perhaps ask for the zoom level as well (the result most likely very much depend on it)? Or ask for results for resetting to the default zoom level? May 24, 2021 at 15:35
  • 1
    Yep, agreed @PeterMortensen, I did indeed all my own Testing with Zoom Level 0, and I had mentioned it also "clearly" about 'Pale Moon', as I was "a bit surprised" by the [109/110] Limit, so I had made sure to "really" be at Zoom Level=0... - I've included your Results...
    – chivracq
    May 24, 2021 at 17:17
  • 2
    I don't see a scrollbar until box 91 on Chrome 90, Win 7, zoom 0, with or without left nav. May 24, 2021 at 21:52

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .