CHAPTER 18 ■ DROP CAPS
Marginal Graphical Drop Cap
HTML
<h1>Marginal Graphical Drop Cap</h1>
<p class="indent"><span class="graphic-dropcap">M<span>arginal
Graphical Drop Cap. The letter M 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.</p>CSS
.indent { position:relative; margin-left:120px; margin-top:20px; }.graphic-dropcap { position:absolute; left:-120px; top:6px;
width:100px; height:90px;
line-height:70px; padding-left:16px; text-align:right;
font-size:80px; font-weight:bold;
color:black; background-color:white; }.graphic-dropcap span { position:absolute;
width:100px; height:90px; left:0; top:0; margin:0;
background-image:url("g.jpg");
background-repeat:no-repeat; }