Pro HTML5 and CSS3 Design Patterns

CHAPTER 18 ■ DROP CAPS

Floating Graphical Drop Cap

Problem You want to create a floating drop cap where the dropcap text is replaced by a graphic.^

Solution Combine the Floating Drop Cap pattern with the Text Replacement pattern.
To use the Floating Drop Cap design pattern, tag the dropcap text in a terminal block
element with an inline element assigned to the "floating-dropcap" class. Position the
drop cap using float:left, position:relative, top, margin-left, margin-right, and
margin-bottom. See Floating Drop Cap for details.
To add in the Text Replacement design pattern, you can use width and height to size the
float to the exact size of the dropcap image. You can also embed an empty span inside the
float and use background-image to display the dropcap image as its background. You can
style the embedded span to cover the text in the dropcap span using position:absolute,
left:0, top:0, and margin:0. See Text Replacement in Chapter 10 for details.

Pattern^

HTML TEXT

CSS .floating-dropcap { float:left;^
position:relative; top:-VALUE;
margin-left:±VALUE; margin-right:±VALUE;
margin-bottom:±VALUE;
width:IMAGE_WIDTH; height:IMAGE_HEIGHT; }

.floating-dropcap span { position:absolute;

width:IMAGE_WIDTH; height:IMAGE_HEIGHT;

left:0; top:0; margin:0;

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

background-repeat:no-repeat; }

Location This pattern works anywhere you can use an inline element.

Advantages The graphical floating 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. A border around the terminal block containing the drop cap
includes the drop cap.

Disadvantages It has the disadvantages of a float, such as triggering browser bugs and interacting with
other floats.

Related to Padded Graphical Drop Cap, Floating Drop Cap, Marginal Graphical Drop Cap; Width,
Height, Sized (Chapter 5); Margin, Background (Chapter 6); Positioned, Closest Positioned
Ancestor, Absolute, Relative, Float and Clear (Chapter 7); Offset Float, Offset Relative,
Aligned and Offset Absolute (Chapter 8); Text Replacement (Chapter 10)