Question

I am trying to code a clean html5 website. I am using the html5 boilerplate as the base of the website. It comes with modernizr. For the page title I am using text-shadow and font-face and have set up a small css fallback via modernizr (when one of the features is not available, a png image will be shown as background).

So the code is

<h1 id="header-title">Title here</h1>

But, as you may have guessed, when I set the fallback png image as background, the “Title here” text is still there. Do you know any way to take that text out? I want it to be as clean as possible. That’s why i didn’t use any text-indent, or javascript to erase innerHTML.

Answer 1

I believe your best option would be to use the Gilder/Levin image replacement technique – text stays but is covered up by the graphic.

Google seems ok with it as discussed in this link, as long as it is not deceptive in nature. (and as long as your graphic says the same thing as the text you aren’t being deceptive)

http://mezzoblue.com/archives/2008/05/05/image_replac/

The Mezzoblue site also has a nice summary of all the popular image replacement techniques.

Here is the Gilder/Levin technique (copied directly from the Mezzoblue site) – you add an empty span tag where your replacement image lives and with absolute positioning you stack it on top of the original text. Now, maybe the extra span tag doesn’t meet your “clean” requirement, but any other technique that hides or removes the real text is worse, in my opinion.

Maybe the cleanest solution is a slightly degraded experience for visitors who can’t use the font-face? Properly set-up, you should be able to reach 99 percent(ish) of visitors with at-font-face.

<h3 id="header">
    <span></span>Revised Image Replacement
</h3>

/* css */
#header {
    width: 329px;
    height: 25px;
    position: relative;
    }
#header span {
    background: url(sample-opaque.gif) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    }

** UPDATE **

The one downside to Gilder/Levin is the replacement image must be opaque. If it’s transparent, the original text may show thru depending on what the graphic looks like.

The Leahy/Langridge Method will work with transparent images (Apple uses this technique for their nav menu) – the only downside I know is if someone is browsing with images turned off and css turned on they may not see any content.

again, from Mezzoblue site

<h3 id="header">
    Revised Image Replacement
</h3>

/* css */
#header {
    padding: 25px 0 0 0;
    overflow: hidden;
    background-image: url(sample-opaque.gif);
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:25px;
    }

another option if failing the “css-on, images-off” scenario is unacceptable – single pixel image replacement. the technique can be found at
mezzoblue.com/tests/revised-image-replacement/
and as noted in another response
css-tricks.com/css-image-replacement/
(sorry for incomplete links – I’m currently only allowed 1 link per post. add a www to the front of each of the previous URL’s to view an assortment of image replacement techniques)