Fahrner Image Replacement
Web Design & Development Guide
Fahrner Image Replacement
Home Up
Fahrner Image Replacement (abbreviated FIR) is a Web
design technique that uses
Cascading Style Sheets to replace text on a Web page with an image
containing that text. It is intended to keep the page accessible to
users of
screen readers, text-only web browsers, or other browsers where support for images or style
sheets is either disabled or nonexistent, while allowing the image to
differ between styles. FIR is named for Todd Fahrner, one of the persons
originally credited with the idea of image replacement.[1]
Motivation
The typical method of inserting an image in an
HTML document is via the <img> tag. This method has its
drawbacks with regards to accessibility and flexibility, however:
- Browsers without support for images cannot see the text. Adding
alternative text using the
alt attribute disallows HTML markup
and causes problems with some search robots.
- Using the
<img> tag to show text is presentational; many
Web designers argue that presentational elements should be separated from
HTML content by placing the former in a CSS style sheet.
- Images referenced using an
<img> tag cannot be easily
changed via CSS, causing problems with alternate stylesheets.
Fahrner Image Replacement was devised to rectify these issues.
Implementations
The original FIR implementation[1]
described by
Douglas Bowman used a heading, inside of which was a <span>
element containing the text of the heading:
<h3 id="firHeader"><span>Sample Headline</span></h3>
Through style sheets, the heading was then given a background containing the
desired image, and the <span> hidden by setting its display
CSS property to none :
#firHeader {
width: 300px;
height: 50px;
background: #fff url(firHeader.gif) top left no-repeat;
}
#firHeader span {
display: none;
}
It was soon discovered, however, that this method caused some screen readers
to skip over the heading entirely, as they would not read any text that had a
display property of none . The later Phark method,
developed by
Mike
Rundle, instead used the text-indent property to push the text
out of the image's area, addressing this issue:
#firHeader {
width: 300px;
height: 50px;
text-indent: -5000px;
}
The Phark method had its own problems, however; in visual browsers where CSS
was on but images off, nothing would display.
Dave Shea's
eponymous Shea method solves both of the issues earlier mentioned, at the
cost of an extra <span> :
<h3 id="header"><span></span>Revised Image Replacement</h3>
By absolutely positioning an empty <span> over the text element,
the text is effectively hidden. If the image fails to load, the text behind it
is still displayed. For this reason, images with transparency cannot be used
with the Shea method.
#header {
width: 329px;
height: 25px;
position: relative;
}
#header span {
background: url(firHeader.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
References
- ^
a
b Bowman, Douglas (2003-03-07).
Using Background-Image to Replace Text. Stopdesign.
External links
Home Up Cascading Style Sheets Printer friendly Brochureware Digital strategy DOM scripting Fahrner Image Replacement Microformat Progressive enhancement Rollover Spacer GIF Techniques for creating a User Centered Design URL redirection Web Interoperability Web modeling Web template Web-safe fonts Website architecture Website wireframe
|