Pro HTML5 and CSS3 Design Patterns

CHAPTER 18 ■ DROP CAPS

What the Marginal Graphical Drop Cap example looks like when the browser cannot load or display the image

Marginal Graphical Drop Cap cont.

Solution details

cont.

You can tag the dropcap text with a span and assign it to the graphic-dropcap class. To

move the drop cap into the space created by the indent, you can use

position:absolute, and you can set left to the negative of the indent you assigned to

margin-left. You can use top to move the drop cap up or down in relation to the block.

You need to use width and height to size the drop cap to the exact size of the image.

This ensures the dropcap text will be completely covered by the dropcap image.

In case the image cannot be displayed (see Figure 18-1), you can use font properties to

style the dropcap text. You can use line-height to move the dropcap text up or down.

You can use text-align:right to move the dropcap text next to the block and padding-

left:+VALUE to move it even closer to the block.

To display the dropcap image over the top of the dropcap text, you can embed a span in the

graphical dropcap span and use background-image to display the dropcap image in it. To

hide the dropcap text behind the image, the image should not have a transparent

background. To position the dropcap image over the dropcap text, you can use

position:absolute, left:0, top:0, and margin:0. You need to use width and height to size

the span to the image.

Location This pattern works anywhere you can have a terminal block element.

Advantages The graphical drop cap is simple to position. It degrades gracefully when the graphic

cannot be displayed because the dropcap text is displayed in its place. You can style the

dropcap text so that it looks good whenever the browser cannot display the background

image. Lastly, screen readers can read the dropcap text without any problem, while

sighted users see the image in its place.