Fahrner Image Replacement
Encyclopedia
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 reader
s, text-only web browser
s, 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.
Fahrner Image Replacement was devised to rectify these issues.
Through style sheets, the heading was then given a background containing the desired image, and the
# 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
# 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
By absolutely positioning an empty
# header
{
width: 329px;
height: 25px;
position: relative;
}
# header span
{
background: url(firHeader.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
Cascading Style Sheets
Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...
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 reader
Screen reader
A screen reader is a software application that attempts to identify and interpret what is being displayed on the screen . This interpretation is then re-presented to the user with text-to-speech, sound icons, or a Braille output device...
s, text-only web browser
Web browser
A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier and may be a web page, image, video, or other piece of content...
s, 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.
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
altattribute 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 described by Douglas Bowman used a heading, inside of which was a<span> element containing the text of the heading:Sample Headline
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:{
width: 300px;
height: 50px;
background: #fff url(firHeader.gif) top left no-repeat;
}
{
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:{
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
Dave Shea
Dave Shea is an Canadian web designer and co-author of The Zen of CSS Design: Visual Enlightenment for the Web.He is known for his work in web-standard development—from his design community project CSS Zen Garden to his active contributions at the Web Standards Project...
's eponymous Shea method solves both of the issues earlier mentioned, at the cost of an extra
<span>:Revised Image Replacement
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.{
width: 329px;
height: 25px;
position: relative;
}
{
background: url(firHeader.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
External links
- Revised Image Replacement — an overview of the various FIR techniques by Dave SheaDave SheaDave Shea is an Canadian web designer and co-author of The Zen of CSS Design: Visual Enlightenment for the Web.He is known for his work in web-standard development—from his design community project CSS Zen Garden to his active contributions at the Web Standards Project...
- Ultimate Image Replacement — a comprehensive image replacement technique by Jesse Schoberg