Recipe 3.9. Replacing HTML Text with an Image

Problem

You want to replace HTML text like a heading as shown in Figure 3-16 with an image that contains visually rich imagery or typography.

Figure 3-16. The default rendering of the heading text

Solution

Use the Gilder/Levin image replacement technique.

First, introduce a span element before the HTML text:

<h1>  <span></span>  Replacement Text Is Here </h1>

Then set the width and height for the replacement image on the H1 selector as well as setting the positioning of the element to relative:

h1 {  width: 216px;  height: 72px;  position: relative:  }

Next, by setting the positioning of the span element to absolute and adjusting the width and height of the span inside the h1 element, the span element now overlaps the HTML text. The last step is to bring in the replacement image through the background property (see Figure 3-17):

h1 span {  background: url(replacementimage.jpg) no-repeat;  position: absolute;  width: 100%;  height: 100%; }

Figure 3-17. The HTML text is now replaced by a graphic

Discussion

There are several image replacement techniques in web development and all seem to have their own benefits and drawbacks.

Origin of the image replacement method

Todd Fahrner is one of the persons credited with the original concept of image replacement technique.

The markup for the Farhner Image Replacement (FIR) technique also introduces a nonsemantic span element, except that the span element is wrapped around the content:

<h1>  <span>   Replacement Text Is Here  </span> </h1>

Then the CSS rules bring in the replacement image through the selector for the H1 element while hiding the text:

h1 {  background: url(replacementimage.jpg) no-repeat;  width: 216px;  height: 72px; } h1 span {  display: none; }

Problem with the FIR method

The easy implementation of the FIR technique made it quite popular in web development. However, screen readers used by people with disabilities would often skip over the reading of the HTML text because the span element set the text to be hidden from view. Thus important text would be lost to those members of a site's audience.

Phark image replacement method

Both the FIR and the Gilder/Levin image replacement methods use an unsemantic span tag to achieve their results. Another image replacement technique created by Mike Rundle from phark.net removes the need for the span tag.

First, adjust the HTML by removing the span tag:

<h1>  Replacement Text Is Here </h1>

For the CSS rules, use a negative value for the text-indent property instead of using the display property to hide the text:

h1 {  text-indent: -9000em;  background: url(replacementimage.jpg) no-repeat;  width: 216px;  height: 72px; }

Like the other methods, the Phark image replacement method works very well. Its main drawback is that the HTML text does not appear if a site visitor has turned off images from being viewed in their browser.

CSS 3 approach to image replacement

The CSS 3 specification has an easy method for image replacement, if browsers were to implement it. For example, to replace text within an H1 element all the CSS that would be required would be one declaration block:

h1 {  content: url(logo.gif); }

The specification also makes no limits on what kind of multimedia can be supported with the content property. In theory, a web developer could place a QuickTime movie instead of an animated GIF:

h1 {  content: url(logo.mov); }

However, at the time of this writing, support for the CSS 3 specification is not in modern browsers. Also, the CSS 3 specification is still under development.