C H A P T E R 18
Drop Caps
This chapter discusses design patterns that create drop caps. A drop cap dramatically styles the first
letter of a document to signal that it is the beginning of a document. Sometimes it is used at the
beginning of a major section of a longer document. Sometimes it styles a word instead of just the first
letter.
Typically, the drop cap enlarges the first letter and lowers it so that the top of the letter is aligned to
the top of the following text, but there is no limit to how the drop cap can be styled.
The design patterns in this chapter are organized from simplest to most complex.
Chapter Outline
- Aligned Drop Cap shows how to create a simple drop cap by enlarging it and
vertically aligning it. - First-letter Drop Cap shows how to create a drop cap without inserting extra
markup. - Hanging Drop Cap shows how to use a hanging indent to create a drop cap.
- Padded Graphical Drop Cap shows how to add left padding to the drop cap to
make room for a background image showing a banner, a grabber, or a decoration. - Floating Drop Cap shows how to float the drop cap to the left so that text below
the drop cap wraps back under the drop cap. - Floating Graphical Drop Cap shows how to display a graphic on top of the
dropcap text. It works great for screen readers, and it shows a styled text version of
the drop cap when the image is unavailable. This is the best Graphical Drop Cap
design pattern for allowing text below the drop cap to wrap back under the drop
cap. - Marginal Drop Cap shows how to use absolute positioning to move the drop cap
into the left margin of a block. All lines of the block are indented. - Marginal Graphical Drop Cap shows how to display a graphic on top of the
dropcap text. It works great for screen readers, and it shows a styled text version of
the drop cap when the image is unavailable. This is the best Graphical Drop Cap
design pattern for preventing text below the drop cap from wrapping back under
the drop cap.