CHAPTER 18 ■ DROP CAPSHanging Drop Cap
Problem You want to display the first letter of a block as a drop cap without increasing the height of
the first line. You also want to position the drop cap higher or lower and control its distance
from neighboring text. You also want all text in all lines in a block element to stay to the
right of the drop cap.
In general terms, you want to move text or an image to the left and to move text to the right
while controlling the position of both.
Solution Mark up the first letter or letters of a terminal block element using an inline element
assigned to the "hanging-dropcap" class. Also tag the terminal block element with the
"hanging-indent" class.
Style the "hanging-dropcap" class as follows:
Use position:relative to prepare the drop cap for positioning.
Use top to move the drop cap up or down.
Assign a negative value to left to put space between drop cap and text.
Assign line-height to the same value as font-size to prevent the large font-size of the
drop cap from expanding the height of the first line.
Style the "hanging-indent" class as follows:
Assign a positive value to padding-left to move text to the right of the drop cap. The value
should be larger than the width of the drop cap.
Assign a negative value to text-indent to move the drop cap to the left of the text. The
value should be equal to or less than the width of the drop cap.
Assign a positive value to margin-top to make room for a drop cap that extends above the
line, or a negative value when a drop cap is lowered.
Pattern^
HTML
CSS .hanging-indent { padding-left:+VALUE;^
text-indent:-VALUE;
margin-top:±VALUE; }
.hanging-dropcap { position:relative;
top:±VALUE; left:-VALUE;
font-size:+SIZE; line-height:+SIZE; }
Location The drop cap must be the first item in a terminal block element.
Limitations Modern browsers all render this solution correctly.
Internet Explorer 6 and Opera 9 position background images differently behind text that has
been moved using text-indent. For this reason, if you must support older browsers, a
graphical hanging drop cap is unfeasible.
Variations You can style the "hanging-dropcap" class using properties such as font, color,
background-color, background-image, padding, border, and so forth.
Related to Aligned Drop Cap, Floating Drop Cap; Margin, Padding (Chapter 6); Relative (Chapter 7);
Offset Relative (Chapter 8); Font (Chapter 10); Spacing (Chapter 11)