CHAPTER 18 ■ DROP CAPSPadded Graphical Drop Cap
Problem You want to indent or center a drop cap and style its background from the beginning of the
line through the drop cap. Behind the padding, you want to put a background image, such
as a banner, an ad, or a grabber, to draw the reader into the text.
In general terms, you want to pad the starting position of an inline element.
Solution A padded drop cap is indented using padding. You can use padding to center a drop cap or
to indent it by a fixed amount. The background color or background image shows through
the padding.
To create a padded drop cap, 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 "padded-
dropcap", makes it easy to style. You can use padding-left to move the drop cap to the
right. You can center the drop cap by using a value for padding-left that is slightly less
than 50%. Lower the percentage as needed to compensate for the width of the content in the
drop cap. You can use margin-left to put transparent space on the left of the drop cap. You
can use padding-right to put padding between the drop cap and the following text. You
can also use margin-right to put transparent space between the drop cap and the following
text.
Limitations In Internet Explorer 8 and 9, the background of padded-dropcap1 is raised by 25px. This is
addressed by a CSS rule for IE 8 and 9 that lowers the background image by 25px.
Pattern
HTML
CSS .padded-dropcap { padding-left:+VALUE;^
padding-right:+VALUE;
margin-left:+VALUE;
margin-right:+VALUE;
background:url("FILE.EXT") REPEAT HORIZONTAL VERTICAL COLOR; }
Location This pattern works anywhere you can use an inline element.
Limitations If you are centering the drop cap and the width of the drop cap’s parent is variable, the
position of the drop cap will be close to center, but may not always remain perfectly
centered as the parent’s width changes. If you need it to be precisely centered, you need to
set the width of the drop cap’s parent to a fixed value.
As you extend the padding on the left, you extend the background on the left. This is part of
the design of this type of drop cap. If you have a background behind the drop cap, but you
do not want to show the background on the left, you can use margin-left instead of
padding-left to indent the drop cap.
Tip You can combine this pattern with other Drop Cap design patterns.^
Related to Aligned Drop Cap, First-Letter Drop Cap, Hanging Drop Cap, Floating Graphical Drop Cap;
Margin, Padding, Background (Chapter 6)