Valid CSS!

Valid XHTML 1.0

Drop-Caps using CSS

The typographic term drop-cap, sometimes called “initial cap”, refers to the setting of the first letter in a major section of text in a much larger size than the rest of the text, and dropping the baseline of the letter far below that of the first line. Usually adjacent text flows around the letter. Sometimes the letter is set in a different typeface, and sometimes in a different color, from the text. Sometimes the letter is enhanced graphically or decorated with ornamental designs (to extremes in mediaeval “illumination”).

This technique is very common in journals,

Can drop-caps be done in a web page? The answer is, yes, but you have to be careful. You can make drop-caps that look fairly good in modern browsers, and are readable in any browser. However there are limitations, due to the limited control in CSS, the uncertainty of the font used on the user’s side, and the infuriating inconsistencies among modern browsers.

This is an example of drop-cap. Here, the drop-cap has float: left and an increased font size.

This is an example of drop-cap. In addition to the previous example, this has letter-spacing: 0.1ex, and line-height: 75%;

This is an example of drop-cap. In addition to the previous example, this has padding-top: .08em;

This is an example of drop-cap. In addition to the previous examples, it uses a sans-serif font.

This is an example of drop-cap. In addition to the previous examples, it has colors set, and padding to allow the background color to properly surround the letter

They are a struggle, but once you have them, their beauty is that all the text is real text, that can be copied and pasted, and can be searched.

float property

The primary tool in making drop-caps is the CSS property float. Setting the value of the first letter to float: left has the effect of putting the letter to the left of the other text, and flowing the other text around it. However, this will not typically have the effect of placing the top of the drop-cap at the top of the first line, nor of placing the baseline of the drop-cap at the baseline of any subsequent line.

typesetting

In typesetting, there are several different styles regarding the height and placement of the drop-cap. The height may be two lines, three lines, or even four lines.

  1. The top of the drop-cap is in line with the top of the first line, and the baseline of the drop-cap is in line with the baseline of some subsequent line.
  2. The top of the drop-cap is substantially above that of the first line, and the baseline of the drop-cap is in line with the baseline of some subsequent line. One rarely sees a drop-cap whose baseline is not in line with that of some line. This effect is difficult to achieve in current CSS. There simply is no property value like “vertical-align: align-bottom-with-some-subsequent-line“.

first-letter selector

The spacing between the drop-cap and the adjacent text may need to be adjusted: Although in my experiments the spacing in MSIE looks all right by itself, the spacing in Netscape and Opera is far too narrow. Fortunately, the the letter-spacing property, functions in NS7 and Opera, but has no effect in MSIE. I find that setting letter-spacing: 0.1ex;, adequate spacing is provided in NS 7 and Opera.

font size on different systems

Unfortunately, Netscape 4 for Windows interprets CSS font-size in some very badly wrong way. A letter with font-size: 200%; is rendered many times the size of the surrounding text. It has to do with Microsoft fonts: happens with Verdana, not with Helvetica on Linux.

If a serif font (such as times) is used, you have to be much more careful about the height. If the top of the drop-cap is nearly, but not exactly, in line with the top of the rest of the line, it will look very bad. This effect is much less pronounced if the body text is a serif font, and the drop-cap is sans-serif or a handwriting font.

A simple solution is to simply not use serif fonts for drop-caps.

See the Western Civ Complete CSS Guide, and the W3 CSS2 page