

Suggested YC News CSS patch - gojomo

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 <i>non</i> PRE+CODE text anywhere on the page fails to wrap. Reading even simple unrelated paragraphs/comments then requires horizontal scrolling.<p>Here is the above paragraph with a leading space to trigger/demonstrate the problem:<p><pre><code> 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.
</code></pre>
A simple fix would be be to add to the news.css stylesheet:<p><pre><code> pre {overflow:auto}
</code></pre>
Then, the PRE block will get its own horizontal scrollbar, when necessary.
======
mhartl
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.

------
pg
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)

~~~
ROFISH
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)

------
gojomo
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:

    
    
     Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor 
    

As soon as there's _more than one line_ in the PRE, the expected scrollbar
appears:

    
    
     Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
     Lorem ipsum dolor
    

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:

    
    
     pre {overflow:auto; padding:2px}
    

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.

~~~
pg
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?

~~~
gojomo
CSS property

    
    
     overflow:hidden 
    

...should just crop.

If the transition text-jump isn't too annoying, this might also be
interesting:

    
    
     pre {overflow:hidden; padding:2px}
     pre:hover {overflow:auto}
    

PRE blocks would be clipped until mouseover, when a scrollbar would appear if
necessary (bumping following text down).

~~~
pg
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.

~~~
ingenium
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

------
curi
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.

~~~
edu
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.

