Suggested YC News CSS patch
Currently, you can use a line-leading-space to create a PRE+CODE block in a YC News story or comment. This has an intended, usually desirable effect -- the PRE+CODE text does not wrap. If the PRE+CODE text includes a long line, however, there is another usually undesirable effect -- the width of the enclosing block element grows, and then even non PRE+CODE text anywhere on the page fails to wrap. Reading even simple unrelated paragraphs/comments then requires horizontal scrolling.
Here is the above paragraph with a leading space to trigger/demonstrate the problem:
Currently, you can use a line-leading-space to create a PRE+CODE block in a YC News story or comment. This has an intended, usually desirable effect -- the PRE+CODE text does not wrap. If the PRE+CODE text includes a long line, however, there is another usually undesirable effect -- the width of the enclosing block element grows, and then even *non* PRE+CODE text anywhere on the page fails to wrap. Reading even simple unrelated paragraphs/comments then requires horizontal scrolling.
A simple fix would be be to add to the news.css stylesheet:
pre {overflow:auto}
Then, the PRE block will get its own horizontal scrollbar, when necessary.
I just tried adding it, and in my browser the long line just gets cropped at the edge of the table; there is no scrollbar. Is there something else I need to add or change?
(Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6)
set a max width maybe? This is from reddit's CSS:
http://reallystatic.reddit.com/static/reddit.css
It works ok in my browser now (Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.11) Gecko/20071204 Ubuntu/7.10 (gutsy) Firefox/2.0.0.11)
I have the same issue. It's bug in Firefox Mac. AFAIK there's no fix for it until FF3. You can still mouseover and scroll, but there's no scrollbar.
The page "works" (renders a scrollbar for that one element) in my Firefox 1.5 on Linux now.
It works for me on Firefox (Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11) but it doesn't work on Safari. (Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-us) AppleWebKit/523.10.3 (KHTML, like Gecko) Version/3.0.4 Safari/523.10)
While we're at it, maybe add
a { text-decoration: underline; }
to force link underlining.
The current CSS relies on the browser for this; since the links on Hacker News are reasonably close in color to the background text, users who disable link underlining in their browsers may have trouble seeing them.
Thanks for applying the change!
I now see, though, that on a single-line my Firefox [Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11] for some reason only clips, rather than adding the intended scrollbar. For example:
As soon as there's more than one line in the PRE, the expected scrollbar appears:
The CSS change helps in the common multiline case but could still be improved. Tinkering a bit, I find adding a small padding helps trigger the scrollbar. Specifically, try this:
Unsure why this is necessary, suspect a browser limitation, where only a vertical trigger causes both horizontal and vertical scrollbars to be considered.
Oh, and I also see it doesn't help at all in IE7, but at least it leaves things no worse. Can't help there, IE users are on their own.
I added the padding and now the scrollbar appears in my browser for one line examples.
I think I actually like it best with cropping instead of the scrollbar. The curious can still get at the text by widening the browser or copying and pasting. Is there any way to get just cropping?
CSS property
...should just crop.
If the transition text-jump isn't too annoying, this might also be interesting:
PRE blocks would be clipped until mouseover, when a scrollbar would appear if necessary (bumping following text down).
I just added your solution (handy to have a repl in the server) and it works well. Thanks very much; this had been bugging me for a long time.
It works fine in Opera, but it still makes the whole window scroll on the newest nightly build of Firefox 3 like before the patch was applied.
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b3pre) Gecko/2007122605 Minefield/3.0b3pre
i don't get it. for me (safari on mac) they both go off horizontally. so it's not a problem specific to pre. and horizontal scrollbars suck anyway.
The problem IS specific to pre. The problem is that a long line in a pre makes the page wider and then the other paragraphs uses all the available space (wich is larger than the screen, and then horizontal scrollbars appear).
With the patch proposed by gojomo, a long line in a pre will not make the page wider so the other paragraphs would work correctly. Evidently, the pre line will still be long so horizontal scrollbars will be still necessary but only within the pre.
This is how they do it on reddit, try making a long line in code mode on reddit.