31st October, 2005

Snook’s Resizable Underlines

After much head-scratching over the CSS Challenge, finally a combination of methods from Ian Lloyd and Simon Willison (plus the input of quite a few other luminaries) led Jonathan Snook to get closer than anyone else. It’s not quite perfect yet, but today readers, I give you Snook’s Resizable Underlines.

underlines sample

The Challenge

The aim is to apply underlines to paragraph text that stretch the whole width of the column (without using justified text), regardless of the lengths of the paragraph text itself. Whilst this can be achieved with background images, this will be useless when the user resizes the text, as the text will break out of the lines and look a right mess (see dark blue area of otherwise ace site The Big Noob and many other sites).

So, we almost have a solution. Here is a working example (try resizing text).

The JavaScript

The JS is unobtrusive, and if JS is disabled, you just get a standard, line-less paragraph. Here imaginary spans are being pulled under the lines of the paragraph to tell the browser where to draw the underlines. This was the only method that created the right number of spans - others created too few or too many.

window.onload = function()
  var el = document.getElementById("a2");
  var dup = el.cloneNode(true);
  dup.id = "a1";


Note that we justify text in the paragraph, although this will only apply to the underlines, as the imaginary spans will reset the text to align left over the justified underlines. Most of the remaining CSS is just for styling the underlines etc.

body {background-color:#FFF;}
p { width:300px; position:relative; text-align:justify; }
span#a1 { color:#FFF; border-bottom:1px solid black; }
span#a1 a { color:#FFF; }
span#a2 { position:absolute; left:0; top:0; text-align:left;}


Simply add the unique span to the text inside the paragraph, and Bob should be your Uncle. Note that links work because the paragraph is the top “layer” over the imaginary spans.

<p><span id="a2">Paragraph waffle here.</span></p>

Caveats and Cautions

Says Jonathan Snook:

I duplicate the node and make the text the same colour as the background. So, if you have a patterned background then it wouldn’t really work. And IE isn’t redrawing the border on the last line.

He’s right. No browsers are re-drawing the last line - it only extends to the length of the words of that final line, just as a standard underline would. Also, if you resize text so big that there is only one word on the line, I find that the line will only extend the length of that word.

The major problem is re-using paragraphs, or positioning them anywhere but top left in the window. The method needs more flexibility to be honest. Otherwise, it rocks. Here’s the working example again.

Can anyone better the Snook method?

So, a couple of problems with line lengths on the last line, or lines with just one word. And it’s a bugger to apply the formatting to other paragraphs on the page. Anyone able to tweak those problems away? It could still be useful as it is, but as always there has to be a better way…

Prev / Next


If you enjoyed this article, please subscribe to my Internet of Natural Things letter, and maybe grab the RSS feed. Thank you.