Web Design in a Nutshell, 3rd Edition

The Rundle/Phark Technique

This technique was developed by Mike Rundle for use on his Phark site. It hides the element text by setting an extremely large negative text-indent that pushes the text off the screen to the left where it can’t be seen.

    <h1 id="header">This is the headline.</h1>
     
    #header {
        height:20px;
        text-indent:-5000px;
        background: url(headline.gif) no-repeat;
    }

This method offers the following advantages:

• No extra span element.

• Screen reader-accessible.

• It doesn’t use any hacks.

Disadvantages include the following:

• It causes problems in Internet Explorer 5.0 for Windows (the background may be moved with the text).

• It won’t work under the CSS-on/Images-off scenario.

• Some search engines look down upon pages that use large negative text-indent values.