Using FIR [Fahrner Image Replacement] – Part 1 – Basic implementation.
When I launched the new template used on this blog some weeks back, a discussion started out on the use of FIR, the Fahrner Image Replacement technique, on the H3 tags I used on the widgets in the different sidebars. Actually, these are not widgets per se as they are hard coded as small included files to maximise load time. An internal recipe if you want. Anyway, the main idea behind using FIR, which is a really old technique, is that I wanted the specific use of images just for these H3s. As pointed out in the comments, I did not go for heavy DOM scripting driven font apps such as Typekit or Google Fonts just because I had no need for these. If I had specific fonts to use for bigger portions I would have used those or Cufòn.
Usability and SEO.
FIR is not the only technique you can use for replacing text with images. You have several techniques which you can find out with a simple Google search. There’s also the sIFR, the Scalabe Inman Flash Replacement, which used Flash to replace text defined by web design guru Shaun Inman. There are 2 reasons why I like the Fahrner Image Replacement technique: usability and SEO. Its use maximises these two core elements. How? Simply because when all CSS are deactivated (which is the case for screen readers) the content is still present. This therefore keeps the content that is associated with the H tag. You can relate to this past article if you want more information on the importance of H tags. Please keep in mind that the way I use the FIR solution is a bit different from the original versions. As a matter of fact, I play more on semantics to reduce the use of unnecessary HTML tags.
Implementing FIR.
Basis.
The FIR implementation is fairly simple. You need to have an image file bearing your graphical text. The magic occurs with the use of CSS to get the text out of the way and replace it with this image. This is an all CSS technique which means that if there is any CSS failure, the fall back will just be the plain text. So here is a piece of simple code:
<html> <head> <title>FIR technique</title> </head> <body> <h3>This is the text to be replaced</h3> </body> </html>
The replacement image is the following:
Hiding the text.
Now let’s get into the CSS-fu. First of all we need to “hide the text”. We cannot use the visibility attributes because we will not be able to exploit the H3 box that is generated. What we can do is reposition the text inside that box. Actually we will reposition it outside the box and even outside the screen, so far that no simple user screen can show the text. Here is how it goes (you will notice that I’m not using a separate CSS file for this just for the sake of the example):
<<html>
<head>
<title>FIR technique</title>
<style type="text/css">
h3{
text-indent: -9999px;
}
</style>
</head>
<body>
<h3>This is the text to be replaced</h3>
</body>
</html>
The text-indent implementation throws the text at 9999 pixels on the left of the screen, so it will not be visible at all.
Replacing the text.
Still with CSS, we need will now get the image to occupy the space left. The image does not actually occupy the space, it sits as a background image and we will be tweaking the heights and widths to adjust to the image.
<html>
<head>
<title>FIR technique</title>
<style type="text/css">
h3{
text-indent: -9999px;
background: url(replacement.png) no-repeat center left;
}
</style>
</head>
<body>
<h3>This is the text to be replaced</h3>
</body>
</html>
The background uses the URL attribute to call the image. The no-repeat attribute says all that it does and the center attribute centres the image vertically and the left attribute sets it to the left. If the image were too large for the containing box we would be using paddings to increase its size. Here for example, we are increasing the top and bottom paddings by 10 pixels each:
<html>
<head>
<title>FIR technique</title>
<style type="text/css">
h3{
text-indent: -9999px;
background: url(replacement.png) no-repeat center left;
padding: 10px 0;
}
</style>
</head>
<body>
<h3>This is the text to be replaced</h3>
</body>
</html>
See the final result in action here.
Get started…
You can now get started with FIR. It is a simple but effective technique. You can download the source files here. Keep in mind that this technique does not apply only for H tags but for nearly all the tags that you can use. For example, on this site, the link on the logo actually uses FIR. In the following part, we will see how you can optimise your use of FIR.
Edit & precisions
I would like to stress on the fact that this technique is considered as “fail” by a lot of people because of the advent of font faces. As I stated in the intro to this article, if I had larger portions of text to change I would have used them. Knowing this technique is handy for your web design culture/education as well as if you have to choose between going for Javascript external calls or CSS for very small elements. Please note that the original technique was not accessible or usable because it used flawed visibility techniques. This version corrects this with the use of the text indent attribute.
