An actual use for the CSS overflow property

January 5, 2011

I have written grumpy things about the limitations of the CSS overflow property a long time ago, but I've recently realized that it does have one actual use in an environment such as WanderingThoughts. And that is to deal with a problem I periodically have with comments.

The problem with comments on WanderingThoughts is that they can break the overall page layout. WT uses a table based layout, so an overly-long line in a comment forces the entire surrounding box to widen to contain it. The result creates a table with a huge width, causing the entry (and other comments) to also be absurdly wide and thus unreadable.

(I usually fix these page width busting comments with magic site admin powers.)

This is exactly the situation where CSS's overflow: scroll is the right answer (instead of the wrong one). The normal drawback of this setting is that it destroys readability, but here it is better to destroy the readability of a particular comment than to let it destroy the readability of all of the text, and the comment formatting isn't something that I control. This is a pretty unusual situation, although I suppose that it applies to anything with user-contributed content in constrained layouts.

(When you are writing main article text, the readability of your overflow: scroll content is presumably important for the text's overall readability (otherwise, why is the content there at all?), and you control the content so you can reformat it in ways that don't destroy your layout while still leaving it readable. And you should, for obvious reasons.)

PS: now that it is no longer 2006 (cf) I could solve much but not all of this problem by finally fixing my usual issue with <pre>. That still leaves lynx sort of out in the cold but increasingly I could live with that (especially just for comments).

Written on 05 January 2011.
« A new building block of my environment: dmenu
An appreciation for the Posix $( ) command substitution syntax »

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

Last modified: Wed Jan 5 00:41:25 2011
This dinky wiki is brought to you by the Insane Hackers Guild, Python sub-branch.