Basic CSS Techniques: FIR - Image Replacement

[Brak]

This article series is in hopes that I can educate people new to CSS to many of the ingenious techniques that all the savvy designers out there use today.

Article 1: Image Replacement

Just what is this FIR stuff?
Quite simply, it allows you to replace text with an image. But what does that really mean? It means that in the source, you are still going to have actual text:
<h1 id="css-rocks">CSS Rocks</h1>
But Times New Roman sucks, what if I want to use DirtyBakersDozen (http://simplythebest.net/fonts/fonts/dirtybakersdozen.html)?

No problem... Create an image (http://www.neathdesign.com/resources/fir/css-rocks.gif). Now, use the following CSS to style the above HTML code:
#css-rocks{
width:125px;
height:13px;
background: url(css-rocks.gif) top left no-repeat;
text-indent:-9999px;
}


There we have it! Check it out in action: http://www.neathdesign.com/resources/fir


How does it work?
By taking the element and giving it a set width and height of the image to replace it, and then using the image as the background we have the image visible. Setting the text indent to negative 9999px puts it off the screen far beyond any screen today, and for years to come (if not forever). Remember, the element must be a block element (div, hx, etc), if it isn't, remember to add in display:block; into the CSS, or it wont work!


Benifits of using this technique

Screen readers can still read the text
Text being replaced can now be manipulated by print stylesheets
Search Engines can read the text
People viewing unstyled content can still read needed information


Now go out and make the web a better place with this! :)

[justlivyalife]

I like it, what is to come? :D

[glyakk]

I use a technique very similar to this. The only difference is I put a span around the text in the markup and use display:none; to make the span element disappear in my 'screen' style(s).

[Brak]

glyakk, while that method is effective superficially, screen readers are not able to read the text. Also, I find this method a bit cleaner if you will. But, of course that's nitpicking :)