CHAPTER 18 ■ DROP CAPSFloating 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 need to position the drop cap higher or lower and control its distance
from neighboring text.
Solution In general, you can float a drop cap to the left and use margins and relative positioning to
fine-tune its position. Specifically, 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
"floating-dropcap", makes it easy to style. You can use float:left to float the drop cap to
the left. You can use position:relative to prepare the drop cap for positioning. You can
use top to move the drop cap up or down—negative values move it up, and positive values
move it down. You can use margin-left to move the drop cap left or right—negative values
move it to the left, and positive values move it to the right. You can use margin-right to
change the space between the drop cap and text—positive values increase the space, and
negative values shrink it. You can use margin-bottom to extend or shrink the transparent
area below the drop cap. By using positive values in margin-bottom, you can extend down
the influence of the float so that text continues to indent on its right.
Pattern^
HTML
CSS .floating-dropcap { float:left;^
position:relative;
top:±VALUE;
margin-left:±VALUE;
margin-right:±VALUE;
margin-bottom:±VALUE; }
Location This pattern works anywhere you can use an inline element.
Limitations If other elements in the same line are also floated left, they will be stacked between the drop
cap and the text. This breaks the dropcap effect. Floats sometimes trigger bugs in browsers.
Advantages The floating drop cap is simple to position, and is one of the most flexible to position and
style. It allows text to wrap around the bottom of the float, which is the most common
dropcap style.
Tips To compensate for the extra empty space that occurs on the left of large fonts, you can shift
the drop cap to the left by assigning a negative value to margin-left.
To compensate for the extra empty space below a drop cap that is created by a negative
value in top, you can assign a negative value to margin-bottom.
Related to Floating Graphical Drop Cap; Margin (Chapter 6); Relative, Float and Clear (Chapter 7);
Offset Float, Offset Relative (Chapter 8)