Why does this technique commonly use negative text-indent?

Question

Let's say you want to replace an anchor with an image, and you make that image the anchor's background. You still want the text wrapped by the anchor to be there for accessibility reasons, but you don't want it visible. A well known technique is to use something like text-indent: -9999px; along with overflow: hidden;

So let's say our anchor box is 50px x 50px, why wouldn't we just do text-indent: 50px? This would shove the text into the hidden overflow of the anchor, no matter how long it gets!

Answer 1

Well, let's just look at what happens when you do that

http://jsfiddle.net/C29Ma/

<div class="image">Hide me please</div>

div.image {
    width: 50px;
    height: 50px;
    background: url(http://placehold.it/50x50) no-repeat;
    text-indent: 50px;
}

Because the text is longer than 50px wide, it wraps around. Only the very first line is indented by 50px.

The negative indent technique came about before there was widespread support for pseudo elements or controlling word-wrapping. It does the job well enough, so people don't change how they do things when a newer/better way comes along.

Your suggestion is very close to one of the modern techniques, though

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

.hide-text {
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
 }