25

Before an answer being composed is posted, the textarea element (edit box) is wider than the answer that will render once actually posted, because the width that is later taken up by the vote tally (balance of votes) is initially available for editing as well.

(The problem goes away when you subsequently edit an answer.)

Can we make the textarea and preview[11] reflect the actual rendering width up front, even before an answer is posted?

Avoiding the need for horizontal scrolling of code is an important aspect of making it readable.

Not knowing the true width ahead of time makes it hard to gauge whether scrolling will be avoided or not.
This is problematic with long code lines as typically found in shell programming, notably in long PowerShell pipelines.

Note:

  • The preview is also based on the extra width, which is the crux of the problem - you truly won't know whether your code blocks will scroll horizontally until you post.

  • As @Makyen points out in the comments, fixing the preview width is not a perfect, universal solution, due to rendering differences across platforms, browsers, and screen sizes. However, there is some consistency to be had, even at resolutions as low as 1280 x 800, and even the variations amount to much smaller errors than the incorrect initial preview - see bottom.

width problem


Rendering differences across platforms and browsers:

Screen shots from a 1280 x 800 laptop screen, in a maximized browser window, with default settings (note that the post width only shrinks if you make your window too narrow to accommodate all elements; conversely going beyond that width does not make the posts wider):

Conclusions:

  • Cross-platform:

    • No single browser renders the same across all platforms.
    • Firefox on Ubuntu renders with the fewest visible characters.
  • macOS: All browsers render the same.

  • Windows: All browsers show more than on macOS, with only Edge, Chrome / Opera rendering the same, Firefox showing the most, IE 11 the least (but still more than on macOS; it is the only browser rendering a lower absolute width across all browsers and platforms).

  • Ubuntu: Chrome / Opera render the same as on macOS, but not Windows. Firefox renders differently, with the fewest number of characters visible overall.

Your browser:

$ScriptBlock = {
    Get-ChildItem Cert:\*\My -Recurse |
    Select Subject,DnsNameList,NotAfter,NotBefore,Thumbprint,Issuer,
           @{n="SAN";e={Try {($_.Extensions | Where-Object {$_.Oid.Value -eq '2.5.29.17'}).Format(0)} Catch{} }},

macOS 10.14.1:

Chrome 70.0.3538.102 and Opera 56.0:

enter image description here

Safari 12.0.1:

enter image description here

Firefox 63.0.3:

enter image description here

Microsoft Windows 10 Pro (64-bit; Version 1803, OS Build: 17134.407)

Edge:

enter image description here

Chrome 70.0.3538.102 and Opera 56.0.3051.104:

enter image description here

Firefox 63.0.3:

enter image description here

IE 11:

enter image description here

Ubuntu 18.04.1:

Firefox 63.0:

enter image description here

Chrome 70.0.3538.110-1 and Opera 56.0.3051.104:

enter image description here


[11] What ultimately matters is whether the preview is faithful in terms of rendering width; while the textarea could remain wider, having it differ in width from the associated preview could be confusing / esthetically displeasing, however - I have no strong feelings either way.

20
  • That's what the code preview is for.
    – Picachieu
    Commented Nov 20, 2018 at 16:27
  • 9
    @publicstaticvoidmain: No, it isn't, because the preview also shows the extra width - in other words: it is not a preview of what will actually render. I've updated the answer to make that clearer.
    – mklement0
    Commented Nov 20, 2018 at 16:28
  • Now I see what you mean
    – Picachieu
    Commented Nov 20, 2018 at 16:30
  • Your code should render the same regardless if it is properly formatted as code.
    – user4639281
    Commented Nov 20, 2018 at 16:52
  • 2
    @TinyGiant: Not with respect to the actual width once posted. That is, the preview may suggest that there'll be no horizontal scrolling, yet on posting there may be - that's the concern; in practice it is a frequent problem with shell command lines; I've added that note to the answer.
    – mklement0
    Commented Nov 20, 2018 at 16:54
  • 11
    Note that the final width of the text will likely not match the width of the textarea because of font differences, markdown, etc. The preview would be better served if it was the same width as the final output though, so I agree with that. Commented Nov 20, 2018 at 19:23
  • 2
    While this is possible, you have to take into account that the number of characters wide for code blocks is different in each browser. Assuming that's not resolved by SE, then the only solution is to have the width of the edit textarea be that which results in the text wrapping with the minimum number of characters in any browser. Note: the width you need set is different in each browser to obtain this same number of minimum characters. Also note that it's not a matter of the edit text area just having the same width in characters, as you must account for the 4 spaces in front of code lines.
    – Makyen Mod
    Commented Nov 21, 2018 at 7:07
  • 3
    This, of course, also doesn't take into account that SE's post display area is semi-responsive, so the user may have their display/window set such that the width of the post's code block is significantly smaller than the maximum which SE permits.
    – Makyen Mod
    Commented Nov 21, 2018 at 7:08
  • 4
    So, in other words, even if you are writing your code such that it doesn't wrap for you, that does not mean that it won't wrap for someone else using a different browser/OS, or the same browser, but with just a window size smaller than the default. The differences, even using the default maximum sizes, are a couple/few characters horizontally and a couple/few lines vertically. Note: I mean H and/or V scrolling after posting, as there are differences between what is previewed, both horizontally and vertically both before and after initial posting and before and after reloading the page.
    – Makyen Mod
    Commented Nov 21, 2018 at 7:13
  • 1
    It's worth noting that the width is screen and window dependent anyway, meaning the width you see isn't necessarily what everyone else sees.
    – jpmc26
    Commented Nov 21, 2018 at 16:27
  • 1
    @Makyen: Good points, so the answer is: it's not a perfect, universal solution, but there's enough consistency to make the fix worthwhile - I've updated the answer with screen shots of rendering differences across platforms and browsers.
    – mklement0
    Commented Nov 21, 2018 at 17:22
  • 1
    @Kaiido: The purpose of a preview is to show you how things will render, which is currently broken. The fact that rendering may be different in different situation doesn't mean that a best - and simple - effort should be made to show you how things will render. As my update shows, there is rendering consistency to be had, albeit not universally.
    – mklement0
    Commented Nov 21, 2018 at 17:34
  • 1
    @Kaiido: As an ideal to approximate it does mean something, and within the constraints laid out in the question, it would. There is no win with the current behavior, only misdirection.
    – mklement0
    Commented Nov 21, 2018 at 23:10
  • 1
    @Kaiido: I'm all ears if you have specific objections to the points made it in my question. Otherwise, I'm not interested in further engaging the you-can't-know-how-it-renders-ever-so-why-not-give-up line of reasoning.
    – mklement0
    Commented Nov 21, 2018 at 23:20
  • 2
    Great idea! I have been wondering for years why my code preview is slightly wrong. If this idea gets implemented, it will save much head-scratching for people like me.
    – anatolyg
    Commented Nov 23, 2018 at 9:58

0

You must log in to answer this question.

Browse other questions tagged .