LD SoftwareBespoke Software, Web Design, Security Consultants and Host Services.

Menu

Sentinel
You have been warned!
We have caught 5884 shameful hackers.

NukeSentinel(tm)

Paypal Referral
Sign up for PayPal and start accepting credit card payments instantly.

Link Exchange
Join our free link exchange

Click Here
 
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

  1. ^ 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

Web Design & Development Guide, made by MultiMedia | Websites for sale

This guide is licensed under the GNU Free Documentation License. It uses material from the Wikipedia.

 

Text Ads
There isn't content right now for this block.

Community Login
Welcome,
Anonymous

Nickname
Password
   

People Online:
Visitors: 120
Members: 1
Total: 121

Online Now:
01 : Monty

Like my code
Then please make a donation.

Which help me produce more free code.


Paypal Verified

Information

Powered by PHP-Nuke

Valid CSS!


Valid Robots.txt

Bad Behavior

[Valid RSS]

[Valid RSS]
You can syndicate our News with backend.php And our Forums with rss.php
You can also access our feeds via Feedburner Site News and LD Software Forums
© 2009 ld-software.co.uk All Rights Reserved.
PHP-Nuke Copyright © 2005 by Francisco Burzi. This is free software, and you may redistribute it under the GPL. PHP-Nuke comes with absolutely no warranty, for details, see the license.
Page Generation: 0.51 Seconds