CSS Hack: text-indent: -10000px;

This CSS technique is used to replace a piece of text with a graphical representation of that same text. The result is that the real text still gets indexed by a search engine AS TEXT.

It's a bit grey-hat'ish because it could be abused. However, when used correctly it serves a good purpose. My opinion is if you don't abuse it by hiding spammy text to get a higher ranking, then there's nothing wrong with it.

(This article has been updated on 3/31/12- jump to see update.)

It basically works like this. Here's an example of your html code:

<div id="articleHeader">This is the header</div>

...and here's the accompanying CSS code:

space

#articleHeader{
    text-indent:-10000px;
    width:50px;
    height:200px;
    background:url('headerGraphic.jpg') no-repeat;
}

space

Sometimes when you use this inside of floated divs and such you'll run into cross browser complications but when used simply to replace text with an image it works pretty well.

The confusing and frustrating part of this technique comes when you try to do a bit more with the technique. For instance, if you'd like to create a graphic navigation bar but you want the text which the graphic shows to be fully accessible, you can just style an unordered list like this:

<ul id="ourNav">
  <li><a href="link1.html">Link 1</a></li>
  <li><a href="link2.html">Link 2</a></li>
  <li><a href="link3.html">Link 3</a></li>
  <li><a href="link4.html">Link 4</a></li>
</ul>

space

...and write the style sheet like this:

#ourNav{list-style:none;}
#ourNav li{
    float:left;
    text-indent:-10000px;
}
#ourNav li a[href ^='link1']{
    height:50px;
    width:100px;
    background:url('link1.jpg') no-repeat;
}
...etc...

space

The problem that you'll find with this is pretty stupid and annoying but basically the link is stretched around the text & since the text is swiped 10,000 pixels off the screen, technically the link goes off the screen as well. It doesn't seem like the hot spot of the link actually goes off the screen, but clicking the link causes the default browser behavior to display a 1px dotted white outline around the link area which, (since the actual link text has been scooted 10,000 pixels to the left) causes the dotted border to span across the entire site and off the page as well.

(This design has since been revised)
For example - click the logo at the top left of the page here:
http://www.blogcatalog.com/

They use this feature so they can get the keywords indexed by SE's. Actually in this case, Blog catalog is using a graphic which says "Blogcatalog" but the text they've replaced is "Blog Catalog, Social Blog Directory and Search Engine" which is kind of deceptive since it's not exactly what the graphic says.


Update: 3/31/12
I have been using a modified version of this technique for a while and I thought I should share. Basically the image replacement functionality is stored in a the .ir CSS class. Then just apply this class wherever you need to replace text with an image. Here's what the class looks like:

/* for image replacement */
.ir {
  display: block;
  text-indent: -999em;
  overflow: hidden;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
}

Also, check out the new helpful articles at the end of this post.

Overall I think it's a pretty cool little technique though it has it's limitations. As I get to know the ins and outs of it a little better I'll come back and update the post.

Helpful Articles

Removing The Dotted Outline
hide text using css [StackOverflow]
Revised Image Replacement [Mezzoblue]

Related Books

  1. martin says:

    nice code, will try it.

  2. Mario says:

    The dotted outline problem can be solved easily: Just add the following universal rule to your CSS:

    a {
    outline: none;
    }

    And that’s all!

  3. Richard says:

    ….or by applying the following:

    overflow:hidden;

    Voila!

  4. been scratching my brain a bit over this, thanks for the solution

  5. CiNiTriQs says:

    It’s a good one, if not abused. (black hat SEO, …)
    But it is real good to be supporting the other users out there that need a text link or description you would otherwise provide by a picture.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>