CHAPTER 18 ■ DROP CAPS
Floating Graphical Drop Cap
HTML
<h1>Floating Graphical Drop Cap</h1><p><span class="floating-dropcap">F<span></span></span>loating
Graphical Drop Cap. The letter F has been covered by the dropcap image.
Screen readers read the text and visual users see the image.
If the browser cannot display the dropcap image, the text becomes visible.
The text can be styled so that it looks good if it ever becomes visible.
Because the drop cap is floated, the text wraps around the bottom of the drop cap
when it clears the drop cap's bottom margin.</p>CSS
.floating-dropcap { float:left; position:relative; top:5px;
margin-left:80px; margin-right:12px; margin-bottom:0px;
width:100px; height:90px;
line-height:80px; text-align:right;
font-size:100px; font-weight:bold;
color:black; background-color:white; }.floating-dropcap span { position:absolute;
width:100px; height:90px; left:0; top:0; margin:0;
background-image:url("f.jpg");
background-repeat:no-repeat; }