As a design pattern that predates movable type, initial letters or “drop caps” remain quite common in books and magazines today. They can be merely decorative, they can help navigation by emphasizing the beginning of a new section, or both. Yet they seem comparatively rare on the web and are even more obviously missing in most e-books.
What is missing?
Though CSS offers the basic layout mechanisms needed for initial letters – floats and ::first-letter – the solution is incomplete. For the result to be visually appealing, a drop cap has to align with its adjoining text in a specific way. The diagram below shows how the baseline of the capital “H” should rest on a baseline of the adjoining text; and how, in the most common case, the top of the H should align with the top of capital letters in the first line.
Through careful adjustment of various properties – font-size, height, margin, line-height… – one can achieve a similar result in CSS. There is a catch: the resulting set of layout values will be tightly coupled to the metrics of a specific font family. If font fallback occurs, the alignment is lost. Any change to the original page design – new font size, a change of paragraph line-height – will also require updating all these values.
As an example, here is an initial letter in the online New Yorker:
Though this capital “I” is a little short – its top is lower than that of the capital “U” in ‘Utah’ – its baseline does line up well with the third line of text. But if the preferred Neutraface family does not load and the browser falls back to the next specified family, we would see this when the layout defined for Neutraface is instead applied to Helvetica Neue:
Often, no baseline alignment is even attempted. For instance, in this Vanity Fair article the baselines of the initial letters do not line up with those of the adjoining text. Dave Cramer collects more examples on his tumblr.
The initial-letter property
To fix this, the CSS Working Group is discussing the initial-letter property specified by Dave in the CSS Inline Layout module (The alignment diagram we used earlier was copied from the specification). Since earlier this month, you can try it out in Webkit Nightly.
It is very exciting to have a native implementation to play with, though there is of course more work to do to finalize the feature design and implement it across browsers.