Fun With CSS: Large Capitals

Fun With CSS: Large Capitals

One thing I’ve always liked about books is the way typesetters sometimes render the first letter differently from the others, usually several times larger, and with the paragraph flowing around it. Sometimes, the first line or the first few words of the first paragraph are also rendered in small caps. I’ve finally figured out how to do this with CSS:

/weblog/files/css-capitals.html

(You can see this example in a separate page. Look at the source to follow along with what follows.)

The key to this is the :first-line and :first-letter element modifiers. These apply the style to the first line and the first letter of the element, respectively. Here, I’ve specified that the first letter of every paragraph should be one and a half times as large as the others, to make it stand out:

P:first-letter {
    font-size:    150%;
}

With just a size specification, there’s a problem: the first letter is 1.5 times as tall as the rest of the first line, so depending on its vertical alignment, there’s either a large gap between the first and second lines, or the large capital towers above the first line. That’s not what I wanted, so I also added

    float:        left;

to make the rest of the paragraph float around the initial capital.

Rendering the first line differently from the other lines is achieved with the :first-line pseudo-selector. As you might expect, this selects the first line in the element. CSS also includes the font-variant attribute, which you can use to transform text in a couple of ways. Thus:

P:first-line {
    font-variant: small-caps;
}

This is all very well and good if you want to highlight the first letter in every paragraph, but that’s not usually the case. Normally, you just want this to apply to the first paragraph in an article, chapter, or subsection. This can be achieved with the adjacency operator, +:

H1 + P:first-letter {
    font-size:  300%;
    border:     1px solid #c0c0c0;
}

Here, H1+P means “a P element that follows an H1 element”. That is, the first paragraph after a level one heading. As you can see, in this case I’ve made the initial capital even larger than the others, and given it a gray border.

One caveat is that this doesn’t work if you’re too sloppy with <P> tags. You may be used to using the fuzziness of the HTML spec to write things like:

<h1>Main header</h1>
This is a paragraph.<p>
This is another paragraph.</p>
This is an implied paragraph.

But for the technique above to work, you do need a “<P>” at the beginning of each paragraph, and a “</P>” at the end.

But the cool thing about this approach is that aside from that, it doesn’t require you to write paragraphs any differently. I’ve seen articles that suggest writing the first letter as “

“, but that’s a pain. I’d rather do it this way.

The next step beyond this would be to assemble a collection of images of illuminated letters, and to have the browser replace an initial “A” with <img src="/images/A.jpg">, but I don’t know whether that’s currently possible.