Method A: Fahrner Image Replacement (FIR)

---

Method A: Fahrner Image Replacement (FIR)

Named for Todd Fahrner, who developed the technique, FIR is the original method used to replace text with an image using the background (or background-image) property in CSS.

Douglas Bowman popularized the method with his fantastic tutorial, "Using Background-image to Replace Text" (www.stopdesign.com/also/articles/replace_text/), published in March 2003.

To demonstrate, let's run through a simple example using FIR to swap a heading tag of text with a stylized graphic.

The Markup

The markup we'll use for the replacement will be the following:

 <h1 >Fahrner Image Replacement</h1> 

Just a simple heading tag, with the text we wish to replace later with a graphic. You'll noticed we've assigned a unique id to the <h1> element, so that we'll have full control over this particular heading with CSS.

Figure 14-1 shows us the results of the markup in a typical browser—the heading being rendered in the browser's default font (in this case the Verdana typeface). Predictable and boring so far.

Figure 14-1: Default rendering of our heading

The Extra Tag

FIR requires an extra tag (in addition to the heading element) to surround the text in the markup. While we could use any tag we wished, the generic quality of the <span> element makes it the perfect tool for the job. Looking at the markup unstyled, the <span> will have no effect on the appearance.

Our modified markup now looks like this:

 <h1 ><span>Fahrner Image Replacement</span></h1> 

Now that we have the extra <span> element in place, we're ready for the CSS.

The CSS

The essence of Method A is to use the two elements that we have to accomplish two separate tasks. We'll use the <span> element to "hide" the text, and then we'll assign a background image of styled type to the <h1> element. It's because of these two steps that we need two elements to work with.

Hide the Text

First, let's hide the text by using the display property on the <span> element:

 #fir span {   display: none;   } 

This will completely hide the text that is within <span> tags in this particular heading. Browsers will show nothing. That's the first step—get rid of the text completely. No need to show you a screen shot of the results—as you can imagine, it would be blank.

Assign a Background

I've created what I think is a stylish graphic version of the text in Photoshop (see Figure 14-2). You could do the same in your favorite image editor as well. Take note of the pixel dimensions, as we'll be needing those in just a moment.

Figure 14-2: fir.gif, the image we'll be using to replace the text

The pixel dimensions of the graphic shown in Figure 14-2 are 287 pixels wide by 29 pixels high. We'll take both the image and dimensions and plug them in as a background image assigned to the <h1> element:

 #fir {   width: 287px;   height: 29px;   background: url(fir.gif) no-repeat;   } #fir span {   display: none;   } 

While previously we hid the text using the display property on the <span> element, here we specify the height and width of the image we're using for replacement, as well as the image itself, using the background property.

We've opened a "window" on the <h1> element that shares the exact dimensions as the image (287529 pixels), while the image will shine through behind the text that we're hiding with the display property.

Figure 14-3 shows us the results of the heading as seen in the browser. All we see is the stylized image. Perfecto!

Figure 14-3: The results of using the Fahrner Image Replacement method

Advantages

By using CSS to serve the image, rather than the markup, we can ensure browsers and devices that don't support CSS will simply display the raw text. Swapping out graphics is as easy as updating a single CSS file—rather than updating the markup.

But with these benefits come a few drawbacks that are very important to mention.

Drawbacks

Accessibility expert Joe Clark has done extensive research on how the Fahrner Image Replacement method breaks down for those using screen readers or other assistive software to read web pages.

The results of his testing can be read in full in his article "Facts and Opinion About Fahrner Image Replacement" (www.alistapart.com/articles/fir/). In it, he finds (among other things) that most screen readers (perhaps wrongly) obey this CSS declaration:

 #fir span {   display: none;   } 

The text is not only hidden visually, but also completely omitted by those browsing with screen readers because of the rule. Some will argue that the display property by its very nature should be recognized only by screened devices, and that perhaps a new CSS media type should be created specifically for screen readers to give designers better control over how systems may present future image replacement techniques—or that screen-reading software should adhere to one of the existing media types such as aural.

In addition to text display issues for screen readers, there are two other drawbacks to the FIR method:

• The semantically insignificant <span> element that is necessary for this particular method to work.

• In the rare event that users have disabled images in their browser (oftentimes for bandwidth-saving reasons), but have kept CSS enabled, neither the text nor the background image will appear.

Weigh the Pros and Cons

The fact remains that by using FIR, designers run the risk of serving incomplete content to those with disabilities, and run the (remote) risk of doing the same for those with the "images off/CSS on" combination. The trick here is to weigh the pros and cons—understand the drawbacks and use caution.

There are a few instances when FIR would still make sense—and I'll share two of them in the "Extra credit" section, later in this chapter.

Because of these accessibility findings that have come to surface, other designers and developers have been continually tweaking the concept of image replacement—finding new ways to "hide" normal text, while assigning an image as a background. Let's look at a few more methods.

---