IN THE BEGINNING was FIR, AKA Fahrner Image Replacement (note that one of the following links returns a 404):
The Daily Report’s 2003 redesign uses (and our book explained) an image replacement technique intended to combine the benefits of accessibility with the power of graphic design. We christened this method Fahrner Image Replacement (FIR) in honor of Todd Fahrner, who first suggested it to us. Douglas Bowman’s tutorial popularized the technique, which was first developed by C. Z. Robertson in 1999. (Robertson, Fahrner, and Bowman each developed the idea independently.)
Preceding web type by a decade, Fahrner gave us the ability to use fonts other than Verdana and Georgia on web pages (i.e. to set type in Photoshop and export it as an image —an ancient web design practice) but to conjure these images of text via semantic HTML markup (the words the text pictured, set in appropriately structural HTML elements).
Then came Phark’s Accessible Image Replacement, which improved on the Fahrner method by avoiding edge case failures and accessibility problems inherent in FIR. The principal aspect of the Phark method—the part of it all of us remember and use to this day—was this little piece of code:
-9999px
So popular was this method, we made a tee shirt out of it, and it sold, baby, it sold.
But despite its enduring popularity, Phark has drawbacks of its own: chiefly, a performance hit caused by the need to draw a giant 9999px box offscreen. (Yes, the browser really does this.)
My friend Scott Kellum, design director at Treesaver, has now sent me this refactored code for hiding text, which I hereby christen the Kellum Method:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
- Really long strings of text will never flow into the container because they always flow away from the container.
- Performance is dramatically improved because a 9999px box is not drawn. Noticeably so in animations on the iPad 1.
_________________
