TECHNICAL
CSS Resizable Underlines
(This article was originally at 4-ever.org)
When I came across Snook's Resizable Underlines via CSS Beauty in response to CSS Challenge: Come on, boffins! on Simon Collison's blog, I immediately thought of the simple way of stretching images I used on the footers at 4-Ever and wondered why nobody had used the method for underlines. I haven't seen my way documented anywhere but it is so simple I thought it was probably one of those obvious things that all CSS whizzkids had in their repertoire. But perhaps not?
The Challenge
In Colly's words:
The Basic Principle
The way I stretched the footer images was to put the transparent image in the foreground rather than the background. In order to validate, an image has to have a width and height stated. By its nature this is a fixed size so how do we make it variable? CSS gives precedence to inline styles over embedded stylesheets over external stylesheets. Later declarations are given precedence over previous declarations. So to make images stretch it is simply a case of putting an inline style statement after the width and height. For example: <img src="path/to/img.gif" width="100px" height="50px" alt="" style="width:99%;" />
Applying the Principle
If we take Colly's piece above, we see there are 9 rows of text. We need a transparent image that has 9 lines, therefore, and then position this on top of the text so it looks like underlines. This is fine and easy but what if the user resizes their text size in their browser? Just like background images, it falls apart. Unlike a background image, however, we can apply inline style to our foreground images by adding variable widths or heights (ems) after the fixed width and height of the XHTML for the image. Nice!
You may foresee another problem. Isn't it going to be a lot of work creating the image for different situations and exactly how far apart should the lines be? It turns out that this is hardly a problem at all! As long as the lines are evenly spaced, eg all 12 pixels apart, and the correct em sizes are stated in the CSS, then any spacing of lines will adjust accordingly! Having said that, I have found in practice that some spacings work better than others when text is resized. At present I think that 12 pixels or 24 pixels apart works best, perhaps because 2 x 3 x 4 = 24. All modern browsers, except Internet Explorer, resize consistently at fixed percentages and these percentages are almost always divisible by 3 or 4. IE has me baffled and uses some other method, but 12 or 24 seems to work best in IE too. This is not gospel, though, I haven't spent too long experimenting. Perhaps a mathematician reading this may have a definitive answer?
OK, we've got our transparent image with lines drawn 24 px apart. For Colly's piece the image size is 9 x 24 = 216 pixels high and 10 pixels wide (width can be anything because it will be stretched anyway). In our XHTML we have our paragraph text and immediately after it we put this: <img src="lines9.gif" width="10px" height="216px" alt="" style="width: 20em; height: 9em;" />
The height at 9em matches the the number of lines we have on our image, so if the font-size is resized, the image is resized proportionally too. (The width is up to you, remembering of course that changing the width may alter the number of lines)
We then position the image. Make sure there is a position: relative on the containing element so that we can use position: absolute on our image and line it up with the paragraph.
Some Working Examples
If you look at the source of these examples you will see how it is done. Sometimes the text has further explanations too. Please try resizing text in different browsers and tell me if it breaks.
- Basic Example. This has a line-height of 2em, lines are 24px spaced and it works in all browsers (as far as I can see:) With long paragraphs the spacing starts to drift in IE. By using shorter images instead of one long image and a little experimentation you will be able to adjust the drift a bit, but why not use shorter paragraphs instead?
- UPDATED BASIC EXAMPLE!. Thanks to Josh you can now click links!
- Jotter/Diary. An example that uses lines image with 12 pixels spacing.
- Zine. Note how more than 1 image can be positioned consecutively. Spacing between lines on the images were 24 pixels on this one. UPDATE: I have altered this slightly to show clickable link and a second paragraph that makes excess lines disappear.
- Zine 2. Image spacing of 12 pixels and overflow used.
- 1 em line-height. Check this out to see how tight line-heights can be very iffy, especially in Internet Explorer.
- One, Two, Three, Four. My first attempts. Have different pixel spacings. May give some ideas. Some work fine in all browsers except IE. So they could be used by setting a style of * html .lineunder {display: none; } to prevent underlines in IE.
Minuses
- Sometimes not quite right in IE
- Line thickness can vary at some browser settings
- Links in the paragraph are not clickable (but see update example above!)
Plusses
- Easy to make the lines image
- Simple, small, clean CSS
- No Javascript
- Judiciously used, can work in all modern browsers
- Will work on top of a patterned background
- Easy to hide lines from Internet Explorer if preferred
- Can give IE its own background if preferred
- Can be used anywhere in a page
- Small line images can be positioned consecutively, with gaps left so that links in the text can be clicked. UPDATE. This is now not necessary wrt links
- If there is only one link in the paragraph, the a link can be set to the lines image to fake it. UPDATE. This is now not necessary wrt links
And finally...
Wouldn't it be great if there was a way to 'click through' transparent images? Just imagine all the things you could do by putting transparent images on top of different parts of your web page and still be able to click all the links below! Now there's a real challenge for the real boffins...
Previous Comments
This article was previously at 4-ever.org. These comments were made there.
bjoern commented
You listed No Javascript as a plus of your technique but i want to add, that this image tag your are embedding is absolutely not semantic. Those images are layout-images we used to use in the past for the bad table-layout-era and should not be used anymore.
Thats what CSS and JS are for and this is one of the advantages of Snook's approach: The code is semantic right and only if the client is capable of a scripting language this layout thing will be added on-the-fly. Don't mess up your markup with non-semantic layout elements. Thats so 90s. Instead you could use the wonderful Behaviour.js library and write some nifty code to add your underline-images to the corresponding paragraphs.
And at last, the lack of multiple links inside a paragraph renders your technique absolutely useless for most of the real-world-scenarios.
Josh commented
Can you not bring the text infront of the image by using z-index?
Peter commented
JOSH! GREAT SUGGESTION! LINKS CAN NOW BE CLICKED! THANK YOU!
Peter commented
bjoern, Thanks for that. I would prefer semantically correct code wherever possible. I always prefer methods that are as simple as possible but I am also person who will use whatever works. So my only objection to Snook's solution is that it is more complicated than mine. Otherwise I am sure I would use it if I needed to. It probably seems complicated to me because I have no idea how to do any javascript, so I will check out the js link you gave and perhaps I will start to learn it.
So what do you think now Josh has found an answer for making links available?
(Link fixed) See example here
Peter commented
Further to a comment from Jonathan Snook on Colly's blog about these underlines I have found a simple way round the problem of there being excess lines when the paragraph is resized in a fixed width column. You can see an example here. Just scroll down to see it and resize your text. Please let me know if you break it. Cheers!
Marko Petkovic commented
Interesting. I haven't ever had idea of resizebles underlines. Maybe I haven't needed them maybe lack of imagination, but I am downloading this page for my tutorials archive.
Peter commented
I wondered what use they were too, Marko, when I saw the challenge ;-) I may have found a CSS method that I will never use! I can see they might be used to create a certain style, such as the exercise book or diary look, but I haven't really had any other good ideas.
Mike Purvis commented
I second the notion of clicking through images. My halloween costume would have been much cooler if you'd have been able to hit links behind the images.
Peter commented
Bloody cool image, Mike! The technicalities of transparent images and how browsers render them is way beyond me, but from my limited viewpoint I wouldn't have thought the boffins would find it too hard. I wonder if anyone is working on it
Peter commented
And thank you very much for the Jello Mold layout, Mike! I don't know why it doesn't seem to have caught on yet seems just about perfect to me.