I couldn't find this already raised apart from for mobile browsers, and this is a separate problem affecting desktop browsers (at least Firefox and Chrome, on at least Fedora and MacOS).

As an example, see this answer. The initial one line code block can be ignored. The problem occurs with the two larger code blocks further down, which have been deliberately sized to require no horizontal scrolling. In Firefox 65.0.1 on Windows 10 this shows correctly. Other OS/browser combinations show horizontal scroll bars and cut off some characters to the right, requiring scrolling to see them:

  • Firefox 65.0 on Fedora 28: 6 characters cut off
  • Firefox 65.0.1 on MacOS Mojave 10.14.3: 3 characters cut off
  • Chrome 71.0.3578.98 (Developer Build) on Fedora 28: 3 characters cut off
  • Chrome 72.0.3626.109 (Official Build) on MacOS Mojave 10.14.3: 4 characters cut off

I'd expect the horizontal width in characters to be consistent across operating systems and browsers, particularly as not having to scroll horizontally is much preferred and many users make an effort to provide for this.


I doubt there's a way to overcome this. Every browser has its own rendering engine that literally renders the font differently than the other, and every OS can have its own ever so slightly different version of the same font installed. We have absolutely no control over those two things.

Also, you have to consider that our sites use a font family of 4 different fonts (ours is Arial, "Helvetica Neue", Helvetica, sans-serif), and the end-user's browser selects the first one available. Given users could potentially end up viewing the content in any number of different fonts and variants of the same font, relying on a specific font width for an answer to appear correctly is not a good idea.

| improve this answer | |
  • I appreciate your point still applies, but just to clarify, I'm only interested in consistency for the monospace code blocks, not the main text of a post – trichoplax Feb 27 '19 at 16:30
  • @trichoplax The answer is still the same, just with a different, even larger font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif. – animuson Feb 27 '19 at 16:31
  • I do appreciate that. I'd still like to see a solution based on font that works in a reasonable range of cases. For example, basing the width of the code block before horizontal scrolling on a fixed number of characters in the font in use by that user. This can be subject to a maximum width so if they select a huge font size they'll still see horizontal scroll bars, while leaving the majority of users with predictable behaviour. – trichoplax Feb 27 '19 at 23:04

You must log in to answer this question.

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