Text-Wrapped Drop Caps in CSS Using the First-Letter Selector

Drop caps — where the first letter of a paragraph is larger than the rest — can be accomplished with the CSS first-letter selector. But if you've been around the Internet for a while, you know that nothing cool is ever that simple. There are a couple of nasty browser compatibility issues to get around, which we'll tackle here. Here's a screenshot of where we'll get by the end:

Here's a paragraph of HTML that we'll be applying the CSS to:


That's all we need to do to the HTML. The rest of this is done entirely in CSS.

Here's the first version of the CSS. The first-letter selector is used to indicate that the style here applies only to the first letter of text using the DropCaps class.


This CSS is pretty straightforward. All it does is increase the font size of the first letter of the text and change it's color. It also adds a little padding around the letter, which is needed because some browsers push the larger first letter right up against the second letter otherwise. Unfortunately, all this simple solution gives us is this:


As you can see, the text is not wrapping around the first letter as it should. The trick here is to add float:left to the CSS class to allow the text to wrap around the first letter.

If you are using Firefox or Safari, everything would work right now. But Internet Explorer users would see this:


In the above screenshot, the first letter is misaligned. In fact, it is actually centered on the first line of text (accounting for the padding added by the CSS class). Worse, as the text resizes, the second line of text can actually wrap underneath the drop cap letter.

The problem is a bug in Internet Explorer's rendering of the first-letter selector. When we resize the text of the first letter, IE doesn't update the line-height property of the first letter. It keeps the line height of the small text — a line height that is far smaller than the actual height of the line. This causes the misalignment and the rendering problems. Fortunately, once we know this, the solution is to simply update the line-height property manually. It is important that we do this right after changing the font size.


Now, we get the correct rendering, as shown below. Note that the line-height value is somewhat of a magic number. Depending on the font sizes of the first letter and the other letters, you may need to slightly adjust this value. Generally, the correct value is somewhere between 0.8em and 1em.

This work is licensed under a Creative Commons Attribution 3.0 United States License.
Please link to this article in your source code comments if you use this content.