WEB STANDARDS CREATIVITY

Image replacement
But I’m still not happy. As much as I love Georgia, that big Georgia O is still not quite doing it for me. This page deserves
something a bit more decorative, so I’ve created my own ornate capital O (Figure 7-16). This O is loosely based on the one
found in Bodoni, an exquisite modern serif designed a year before Poe was born.
Figure 7-16. My custom versal
Rather than putting my versal image in the markup, I’m going to use an image replacement technique.
The particular image replacement technique I used is but one of many, most of which have been compiled by
Dave Shea on his mezzoblue.com site (www.mezzoblue.com/tests/revised-image-replacement/). While I
prefer this method for this example, others may be more appropriate for different situations, and I recommend
reading up on them. You can also find more about image replacement techniques in Chapter 2,
“Taming a Wild CMS with CSS, Flash, and JavaScript.”
Image replacement does exactly what it says: it replaces an element’s HTML text with an image. In this example, it will be
accomplished by sucking the text out of the element with a negative text-indent, and then dropping in my versal graphic
as a background image.
.drop {
width: 83px;
height: 83px;
float: left;
text-indent: -9999px;
background-image: url(o.gif);
background-repeat: no-repeat;
background-position: top left;
margin-right: .1em;
margin-bottom: .1em;
}
chapter 7 Bridging the Type Divide: Classic Typography with CSS
173