Drop Caps with CSS

Drop caps can be an attractive feature in printed text, but it is not entirely trivial to get them to come out well on the web. CSS offers a couple of ways of doing drop caps, each with their own pitfalls, though with care a reasonable cross-browser solution can be had. If you insist on your pages looking good in every browser under the sun, then avoid them though.

The problem here is getting the right alignment and spacing, as well as the standard problems with ‘A’ and ‘L’. Use a percentage font size to get the right sized letter, a line-spacing specified in terms of the new font size to get the vertical alignment, a negative margin at the bottom to lose any unsightly gaps (the exact value of this is not critical to the layout) and a right margin to get the right letter spacing with the rest of the word (how much you need depends on the letter – you can of course have a negative margin here to allow overlap).

All this is critically dependent on the relevant font metrics and exposes us to subtle variations in browser layout calculations, though it all seems to work reasonable well in most of the various browsers I have tested it in – though see notes below. It is of course very nice that CSS enables us to even attempt such things.

It's probably a good idea to set your own line-height, to make the calculations more predictable. This page uses a line-height of 1.3em.

The main paragraphs on this page start with a one-character span with CSS:

span.first
{
 float: left;
 font-family: Old English, Georgia,serif;
 font-size: 300%;
 line-height: 0.85em;
 margin-right: 0.03em;
 margin-bottom:-0.25em;
}

An alternative method is to use the first-letter attribute, but this causes browser dependent problems:

p.dcpara:first-letter
{
 float: left;
 font-family: Old English, Georgia,serif;
 font-size: 300%;
 line-height: 0.85em;
 margin-right: 0.03em;
 margin-bottom:-0.25em;
}

The style is essentially the same in both cases, though the relevant value of line-height is different (I don't quite understand the model here yet, this was all derived very empirically). The span or first letter may have padding added to change the size of its bounding box, the margins may be modified for particular effects, and of course color styles etc. may also be used.

These examples are at their best if the Old English font is available. The Q appears to be misplaced by Opera 7.23, appearing lower than it does in IE6 or Mozilla (Q is the only upper case character that commonly has a descender). Mozilla 1.0 seems to use a non-standard way of placing text in its bounding box and the span examples have the drop cap appearing slightly too high, whereas in the first-letter examples it appears too low. Mozilla 1.7.1 gets the span examples right, but still puts the first-letter ones too low (we can fix this by setting margin-top:-0.2em or somesuch, which seems to have no effect on IE, but makes the letter appear too high in Opera 7.23). Konqueror 2.2.2 doesn't seem to handle first-letter properly at all and makes a mess, though the span examples seem OK. The precise position of the letters varies slightly between browsers and even between different font sizes in the same browser (though only by a pixel or two). In IE, do not set the vertical-align property for the paragraph, as this seems to mess things up (the letter appears too low). IE sometimes clips the letter, if this happens, add some padding (as in some of the examples here). There seems to be no difference between compliant and quirks mode in the browsers where that is relevant (Mozilla and IE6.0).

The cross-browser solution seems to be: use the span method, which seems to work well in standards-compliant browsers.

Two using first-letter:

Bolorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Quolorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

And the rest using spans:

font-family: Verdana; font-size: 300%; line-height: 0.8em; margin-right: 0.0em; padding-bottom: 0.1em;

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Dolorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

font-family: Old English, serif; font-weight: bold; font-size: 430%; line-height: 0.9em; margin-right: 0.05em; padding-top: 0; padding-bottom: 0.02em; background-image: url(copper.jpg);

Wolorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Finally, you can always use the classic floated image, though of course this doesn't work if your user doesn't have image loading on or is using a text-only browser. You can scale the dropped image appropriately by setting its height to a dimension in ems - the browser should scale the width to keep the right aspect ratio. As before, margin-bottom can be used to stop unsightly gaps appearing on some browsers, and relative positioning can be used to move the floated image around.

olorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

float:left; height:5.5em; margin-right:0.1em; margin-bottom:-0.4em; position:relative; top:-0.2em;

Illuminated letters from Kaleidoscope, Retrokat and Bigwood.