Drop cap

Back when actual printed books were the rage, before everything went to a digital format, I used to see a drop cap¹ in books. I haven't seen them much anymore, but I still think they're cool. Of course that may just be nostalgia talking.

There really is only one way to do a drop cap in semantic HTML, and it uses the pseudo-classes available in CSS3 - which means not all browsers will show it. Of course since we're going to be writing semantic HTML, the only impact - or non-impact - will be for some visual users.

First, let's start with an example of actual content.

<p>
Long ago, and far, far away, lived a small boy and his dog. Neither the boy, nor the dog, was remarkable in any way - in fact, one might say the most remarkable thing about either of them was how unremarkable they were. No one seemed to truly notice them in any way, but, the two were, from the time the boy was very young, inseparable on every adventure they found, and this story is just one of their many adventures together.
</p>

Next, we'll add the style using the pseudo-class for the first-child, which identifies the first paragraph on the page, and the pseudo-class for the first letter.

<style type="text/css">
         p {
            font-family:sans-serif;
         }
         p:first-child:first-letter {
            float:left;
            font-family:serif;
            font-size:6em;
            font-weight:bold;
            padding:.15em .1em 0 0;
         }
</style>

We'll set the top padding to .15em to push the top of the drop cap down to the top of the font used in the rest of the line. Using .15em allows the space to scale as long as you don't do anything with the line height - if you modify the line height, expect to modify this padding value as well.

This approach will give you a clean way to give a drop cap - but let's say you want one of those fancy drop caps - perhaps an illuminated one like in those lovely medieval illuminated manuscripts. The trick here is that the font face you want to use is not installed on the user's device, so we'll use the font-face rule to get it there.

<style type="text/css">
         @font-face {
            font-family:Celtic;
            src: url(http://www.cathmhaol.com/images/Celtic.ttf) format("truetype");
         }
         p {
            font-family:sans-serif;
         }
         p:first-child:first-letter {
            float:left;
            font-family:serif;
            font-size:6em;
            font-weight:bold;
            padding:.15em .1em 0 0;
         }
</style>

Now, we have a simple, fancy, design-driven drop cap that works in newer browsers, and does not disrupt other user-agents - something that looks like this...

Long ago, and far, far away, lived a small boy and his dog. Neither the boy, nor the dog, was remarkable in any way - in fact, one might say the most remarkable thing about either of them was how unremarkable they were. No one seemed to truly notice them in any way, but, the two were, from the time the boy was very young, inseparable on every adventure they found, and this day would prove no differently, even though the sun shone brightly and the stream was still cold, cold enough that when Kyrgen waded into it he let out a sudden gasp and felt his toes go numb. Just a little further upstream, Prowler laid on the green grass under a tree, seeming to be asleep.

Now that you know how to do drop caps there isn't anything stopping you from writing the next great novel.

Notes: links open in a new window

1. A large initial letter that drops below the first line of a paragraph, usually used at the beginning of a section or chapter of a book.