First-Letter Experiments

Discovering the poetential and limitations of the ::first-letter pseudo-element.

Mouse over the examples to see the location of the first letter.

Last updated: 12:07 AM Wednesday, August 17, 2005

Example 1: Basic

This example is about as simple as it gets. The ::first-letter pseudo-element is given a font-size of 3em, floated left, and given some padding to the right. Note that the paragraph's indentation has disappeared.

Example 2: Hanging

This example doesn't work as intended, presumably because the CSS 2 specification doesn't list text-align and width as applicable to the pseudo-element. This is unfortunate, as it means that the "L" cannot be pushed against the block of text--it just hangs out there, all alone. This effect, however, can be forced with a non-semantic <span> element.

Example 3: Hanging with a <span>

That's better! Now the "L" is nicely positioned next to the text. But check the results in IE. For some reason that browser isn't applying the width or text-align set on the <span>, allowing the first line to be pulled to the left with the float. It's an effect that you'd need to set a negative text-indent to create in other browsers.

Example 4: More complex decoration

Let's see if we can do something more complex. How about one of those fancy decorated drop-caps you see in books?

This technique requires that the height and width of the drop-cap be set, so it's necessary to use the <span> technique. The line-height of the <span> is set to its height, centering the letter vertically, and the font set to something a bit more decorative. The problem with this technique is that it doesn't scale with the text. I look forward to the day that we can set the background image or even the original SVG image to scale with the box (which would have dimensions set with ems).

Example 5: Centered Capitals

This technique attempts to emulate the large, centered capital letters that begin articles in some magazines (Harper's, I think).

The idea is pretty simple: use indentation to push the first letter half-way across the line, then use a negative margin (of about half the letter's width) on the letter to pull it back so that it is centered. Unfortunately, unless the font is monospaced, the letter likely won't be truly centered, because most letters are not a full em wide (with the exceptions of "M" and "W" in most fonts). You could tweak the indentation and negative margin for a specific font to get better results, but things will rarely be perfect. Another problem is that it doesn't work in IE.