Pro HTML5 and CSS3 Design Patterns

CHAPTER 18 ■ DROP CAPS

Marginal Graphical Drop Cap

Problem You want to display the first letter of a paragraph as an image in a marginal drop cap. If the
browser cannot display the image, you want the dropcap text to be visible. You want
screenreader software to read the drop cap properly.

Solution Combine the Marginal Drop Cap design pattern, the Text Replacement design pattern
(Chapter 10), and the Top-Offset Sized Absolute Element design pattern.
Indent a terminal block element to make room for the drop cap. Make the block positioned
so the drop cap can be absolutely positioned relative to it. Tag the dropcap text with a span,
and use absolute positioning to move it into the block’s indent. Embed a span into the drop
cap to display the dropcap graphic as its background image. Absolutely position the
embedded span to cover the dropcap text so that it is hidden behind it.

Pattern^

HTML ^

CSS .indent { position:relative;^
margin-left:+INDENT;
margin-top:±VALUE; }

.graphic-dropcap { position:absolute;

left:-INDENT;

top:±VALUE;

width:IMAGE_WIDTH;

height:IMAGE_HEIGHT;

line-height:+VALUE;

padding-left:+VALUE;

text-align:right; }

.graphic-dropcap span { position:absolute;

width:IMAGE_WIDTH;

height:IMAGE_HEIGHT;

margin:0;

left:0;

top:0;

background-image:url("FILE.EXT");

background-repeat:no-repeat; }

Solution details To make room for the drop cap, you can indent the terminal block element containing
the drop cap using margin-left:+VALUE. The indent should be as large as or larger than
the width of the dropcap image. The larger the indent, the more space you can put
between the drop cap and the text. To move the drop cap above the block, you can use
margin-top: +VALUE to make room for it. Because the drop cap is positioned relative to
the block, you need to position the block using position:relative. You could also use
position:absolute or position:fixed to make the block positioned.