What are we facing?
More often than not, you come up with a beautiful title design based on a font inspired by Dali's most wildest dream. Out of the blue, somebody tells you that you can't go ahead because that font may exist only in your computer, and of course in the hypothetical Dali's computer. Your mom didn't raise a fool, so you just convert the title to image, and now everybody can see it. Think twice, text based browsers (blind users do use them) can't. No problem, just add an alternate text. Not so fast, for search engines “hx” (header) and “title” elements have more SEO relevance than “alt” (alternate text) attributes, it’s just about semantic best practices. There must be a way to let your artistic spirit be expressed, life can't be that bad.
The Solution
Wait a minute. Is not the header (just above) in font Shelley Allegro? Yes, it is. The immense majority of the computers don't have it, so I did an image of it. But if you see this post using a text based browser like Lynx, or Firefox Accessibility Extension, you will be able to see "The Solution" in plain text. It is “h2” header element. How come? Take a look at the source code.
You will see this:
<h2 class="firh2">
<span class="firspan">The Solution</span>
</h2>
Let's introduce the Fahrner Image Replacement method. In this post you will see the basics of that clever method. By having the text of the “h2” inside a “span” element, you can play with styles a little bit. For those having styles and images, the following CSS will show the image we want:
.firh2
{
background-image: url( "fir-the-solution.gif" );
background-repeat: no-repeat;
height: 31px;
}
.firspan
{
display:none;
}
The "firh2" id will set image I want as the background of the header, without repetition of it and with the actual size of the image to avoid stretching. The “firspan” will hide the the text of “span”.
For those text based browsers, neither styles nor images are loaded, so the “span” content is displayed.
Some external references
