The problem with <pre>

February 13, 2006

Generally, <pre> is a fine thing, and it's become the de-facto way of writing any number of 'computer' things; code, Unix sessions, even equations, as as various WanderingThoughts entries illustrate. But there's a problem with it: <pre> text doesn't line-wrap.

The consequence is that if you write a long <pre> line, the browser will happily force a line wider than the browser window, making the reader either widen their browser (if they can widen it enough) or scroll. For WanderingThoughts it's even worse, because a CSS irritation forces me to lay it out using a table. Text inside a table cell is wrapped not at the browser width but at the table cell's width, and a single long line widens the entire cell's width, causing all text to be that wide. The net result is that if you don't (or can't) make your browser wide enough, you can't read anything.

Sometimes this is what's required and damn the torpedoes (and I'll 'line-wrap' by hand to try to avoid too-long lines). But there's a surprisingly large number of times when what you really want is just monospaced text with forced line breaks where the raw text has line breaks; extra line-wrapping doesn't actually hurt (especially if it's clear).

(I might as well admit that this is part of the 'personal aesthetic reasons' I alluded to in my comment on this entry; I browse with a fairly narrow browser window.)

In DWikiText my solution has been to write 'manual' <pre> text using _ and [[...|]], more or less like this:

_[[... ... ...|]]_ \\
_[[... ... ...|]]_

But this is awkward, doesn't clearly show automatically wrapped lines, and compresses whitespace; plus, it requires manual work. Ideally, DWikiText would have a formatting option that makes it easy to do the right thing. (After all, one of the reason <pre> text gets used here so much is that it's so easy.)

It's possible to use CSS to get most of the way to what I want (not all; there is no way to not compress whitespace without disallowing automatic line-wrapping). The CSS that I've come up with so far is a <div> with 'font-family: monospace; margin-left: 1em; text-indent: -1em;', and then each line inside it is another <div> (empty lines have to be forced with <br>). This causes wrapped lines to be indented by a bit, to make them stand out. Of course this looks pretty bad if you aren't using CSS, and I still value readability in lynx.

(It's still a temptation to implement it in DWiki.)

Comments on this page:

By cks at 2006-02-15 20:50:38:

It's been pointed out to me that the CSS2.1 pre-wrap value for the word-wrap property is exactly what I want. Unfortunately Firefox (still) doesn't support it, which makes using it a non-starter.

(Even once Firefox grows support for it, I'd probably have to wait a year or two before I could assume that enough people have a recent enough version of Firefox. Such is life on the web; ie, 'slow'.)

Written on 13 February 2006.
« Weekly spam summary on February 11th, 2006
GNU bc for the birthday paradox »

Page tools: View Source, View Normal, Add Comment.
Login: Password:
Atom Syndication: Recent Comments.

Last modified: Mon Feb 13 01:52:07 2006
This dinky wiki is brought to you by the Insane Hackers Guild, Python sub-branch.