Home → Articles →

Drop Caps

To replicate drop-caps (y'know, those big letter things that start a paragraph), all we need to do is increase the size of the first letter of a paragraph and float it to the left. Easy.

HTML Dog, The Book HTML Dog book cover

HTML Dog is hosted by Titan Internet

Step 1: The HTML

We can start with something like the following HTML:


<p><span class="firstletter">O</span>nce upon a time in a blueberry bubblegum land...[Big load of text]...a lost sunfish from the Sweet Spaghetti River.</p>

If a certain popular browser were a little more advanced we could have used the CSS first-letter pseudo-element, which would remove the need for the span tag scaffolding around the "O". In the CSS all we would need is p:first-letter { ... but although IE 6 and 5.5 are fine with this, IE 5.0 doesn't understand the pseudo-element so to maximise compatibility, it might be a good idea to should stick with the span tags and the following CSS...

Step 2: Making the Drop Cap 


body {
	font: 100%/1.5 arial, helvetica, sans-serif;
}

.firstletter {
	float: left;
	font-size: 3em;
	line-height: 1;
	font-weight: bold;
	margin-right: 0.2em;
}
(Note that you can read more about float, margin and other layout properties mentioned in these Techniques in Chapter 5.)

Alternatively you could replace the functional text with an image (see more on image replacement in Chapter 4) by changing the CSS to something like:


body {
	font: 15px/2 arial, helvetica, sans-serif;
}

.firstletter {
	width: 40px;
	height: 50px;
	float: left;
	display: block;
	text-indent: -999em;
	background: url(images/o.gif);
	margin: 0 8px 8px 0;
}
You can see these examples at work at htmldog.com/book/examples/dropcaps1.html and dropcaps2.html. dropcaps3.html shows the first-letter pseudo element method.