Wednesday, August 22, 2012

Styling PRE, as oxymoronic as that sounds

Here is a long URL within the flow of regular text: http://www.google.com/cse?cx=007432832765683203066%3Azj_ist-lct4&ie=UTF-8&q=bjkeefe&sa=Search&siteurl=www.google.com%2Fcse%2Fhome%3Fcx%3D007432832765683203066%253Azj_ist-lct4&ref=&ss=847j149539j7#gsc.tab=0&gsc.q=bjkeefe&gsc.page=1

Here is the same URL, enclosed in <pre></pre>, on a line following the regular text:

http://www.google.com/cse?cx=007432832765683203066%3Azj_ist-lct4&ie=UTF-8&q=bjkeefe&sa=Search&siteurl=www.google.com%2Fcse%2Fhome%3Fcx%3D007432832765683203066%253Azj_ist-lct4&ref=&ss=847j149539j7#gsc.tab=0&gsc.q=bjkeefe&gsc.page=1

On this blog, the text that won't fit within the width constraint of the post area is chopped. (At least visually -- it's possible to select the whole thing, including the part that's not displayed, by triple-clicking the line.) On other blogs, the text may run over the sidebar, or the browser itself may add a horizontal bar, giving the incorrect cue that the whole page is really wide. All of these can be annoying.

Same as above, except <pre> has inline CSS styling that causes the horizontal scroll bar to appear (if necessary) only under the one particular ling:

http://www.google.com/cse?cx=007432832765683203066%3Azj_ist-lct4&ie=UTF-8&q=bjkeefe&sa=Search&siteurl=www.google.com%2Fcse%2Fhome%3Fcx%3D007432832765683203066%253Azj_ist-lct4&ref=&ss=847j149539j7#gsc.tab=0&gsc.q=bjkeefe&gsc.page=1

!!!

Notes ...

In re "if necessary," here is a short <pre> bit of text, same styling:

http://www.google.com/

That is, no horizontal scroll bar, because it wasn't needed, but same bit of CSS can be used. This would be handy if you had lots of lines of text that you didn't want to wrap, some of which would be too long, some not.

The styling:

<pre style="overflow:auto;">[...]</pre>

First seen in the CSS file associated with an Ars article:

.article-content pre {
 overflow: auto;
}

More here.

I first thought it was a form when reading the Ars article. When single-clicking the text above the scrollbar didn't select the whole line, as I expected (such as in the box containing the URL that appears when you click the Share button under a YouTube video), I triple-clicked it. When that somewhat surprisingly did what I wanted (selected the whole line of text), it made it seem worth doing a CTRL-u.

It may still be worth putting a longish chunk of text into a form if the intent is to make it easier for readers to copy it.

Also may be worth giving some thought to how overflow:auto; might be used with oversized images.

2 comments:

Substance McGravitas said...

Hmm. Why not a code tag?

bjkeefe said...

I can't be as specific as I'd like, but my impression is that the code tag is more or less just a font-styling flag, where as the pre tag is truly WYTIWYG. Handy for conveniently displaying text containing angle brackets, multiple consecutive spaces, etc., as well as for those times when you want vertical/column alignment to be maintained.

If you know different, though, I'd be delighted to be corrected.

ShareThis