Pro HTML5 and CSS3 Design Patterns

CHAPTER 18 ■ DROP CAPS

430

First-Letter Drop Cap

HTML

<p class="dropcap1"><code>first-letter</code> can create an aligned drop cap.

The problem is that browsers have a hard time aligning pseudo elements.</p>

<p class="dropcap2"><code>first-letter</code> can be used to create a floating

drop cap. The problem is that the drop cap cannot be positioned up or down.</p>

<p class="dropcap3">first-letter can be used to create a hanging drop cap in the

margin. The drop cap can even be replaced by a background image.

The problem is that the drop cap cannot be positioned up or down.</p>

CSS

.dropcap1:first-letter { font-size:60px; vertical-align:0px; font-weight:bold; }

.dropcap2:first-letter { float:left; margin-left:-3px; margin-right:3px;

position:relative; top:-2000px; /* DOES NOT WORK */

font-size:60px; line-height:normal; font-weight:bold; }

.dropcap3 { padding-left:105px; text-indent:-104px; margin-top:50px; }

.dropcap3:first-letter { padding:40px 50px; font-size:1px; line-height:1px;

color:white; background-image:url("f.jpg");

background-position:center center; }