CHAPTER 18 ■ DROP CAPSMarginal Drop Cap
Problem You want to display the first letter of a block as a drop cap in the block’s margin. You do not
want the text to wrap back under the drop cap when it flows below the drop cap.
Solution Use the Indented design pattern (Chapter 8) to create a left margin in the block and use
absolute positioning to move the drop cap into the left margin. Use margin-left to indent
the block element to make room for the drop cap in the left margin. Optionally, use margin-
top:+VALUE to insert additional space above the block to make room for the drop cap.
Assign position: relative, position:absolute, or position:fixed to the block so that
the drop cap can be absolutely positioned relative to it. Tag the dropcap text with a span
assigned to the marginal-dropcap class (or another class of your choosing). Use
position:absolute and left:-INDENT to move the drop cap into the block’s margin. The
negative indent assigned to the drop cap is typically the negative of the indent assigned to
the block. Occasionally, you may want to make it a few pixels larger than the block’s indent
because larger fonts have extra whitespace on their left. Use top:±VALUE to move the drop
cap up or down.
Pattern^
HTML
CSS .indent { position:relative;^
margin-left:+INDENT;
margin-top:±VALUE; }
.marginal-dropcap { position:absolute;
left:-INDENT;
top:±VALUE; }Location This pattern works anywhere you can have a terminal block element.
Advantages The marginal drop cap is simple to position, but it requires manually playing with the size
of the margin and the size of the indent to accommodate the size of the drop cap’s font.
Disadvantages A border around the block containing the drop cap will not include the drop cap. This
happens because the pattern uses margin-left instead of padding-left to create the
indent. This avoids a positioning bug in Internet Explorer 6, but excludes the drop cap from
being within the border around the block.
Related to Margin (Chapter 6); Indented (Chapter 8); Positioned, Closest Positioned Ancestor,
Absolute, Relative (Chapter 7); Indented, Offset Absolute, Aligned and Offset Absolute
(Chapter 8); Left Marginal (Chapter 13)