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.

Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.