CHAPTER 18 ■ DROP CAPSAligned Drop Cap
Problem You want to display the first letter of a block as a drop cap. An aligned drop cap is a letter
that has a larger font size than the following text. Its baseline is typically dropped lower than
the baseline of the following text. It may also be styled with a different font, weight, case, and
so on.
In general terms, you want to style a section of text and align it to other text.
Solution You can mark up the first letter or letters of a terminal block element using an inline
element. Assigning this element to a class, such as "aligned-dropcap", makes it easy to
style. You can use font-size to increase the height of the text. You can use a negative value
in vertical-align to lower the text below the baseline. You can use a positive value in
vertical-align to raise the text above the baseline. You can use line-height to fine-tune
how all this affects the height of the line. You can use line-height:normal to ensure the
drop cap does not overlap neighboring lines. You can use a value slightly smaller than 1em in
line-height to tighten up the space between the lines.
Pattern^
HTML
CSS .aligned-dropcap { vertical-align:±VALUE;
font-size:+VALUE;
line-height:VALUE; }
Location This pattern works anywhere you can use an inline element.
Limitations Using text with different fonts and font sizes increases the height of a line. Furthermore,
offset text increases the height of a line. Thus, an aligned drop cap puts extra space between
the first and second lines. The lower you place the drop cap, the more space you put
between the lines.
Related to Hanging Drop Cap, Floating Drop Cap; Vertical-Aligned Content, Vertical-Offset Content
(Chapter 12); Font (Chapter 10); Spacing (Chapter 11)