Hiding Text Using "Text-Indent"

Text-Indent to hide link text

You don't say exactly how you his the content of .hide, but if the idea is to use display:none, forget it. Elements with display-none are ignored by both screen readers and search spiders, as content hidden is assumed to be irrelevant (not least as black hat SEO-ers could easily stuff hidden text with keywords).

I don't really see what's wrong with the text-indent solution. Granted, I'd reduce the indent value to stop IE6 reserving memory for a huge unused canvas, but it's still the recommended technique for these efforts.

Hide text using css

This is one way:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

Here is another way to hide the text while avoiding the huge 9999 pixel box that the browser will create:

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Hiding Text using css: text-indent

AFAIK google crawler doesn't see that you have moved text away from visible part of the page, it can still find out the text that you have hidden with text-indent. This shouldn't hurt the SEO. Also, if that was the case, using text-indent for the very purpose would not have been a common practice.

Hiding text: text-indent or color: transparent?

font-size: 0px; should do the trick.
If you want to make the button smaller than the text, you'll also need to add line-height: 1em; or something similar.

Hide Text with CSS, Best Practice?

Actually, a new technique came out recently. This article will answer your questions: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement

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

It is accessible, an has better performance than -99999px.

Update: As @deathlock mentions in the comment area, the author of the fix above (Scott Kellum), has suggested using a transparent font: http://scottkellum.com/2013/10/25/the-new-kellum-method.html.

Is text-indent: -9999px a bad technique for replacing text with images, and what are the alternatives?

A good reason not to use the -9999px method is that the browser has to draw a 9999px box for each element that this is applied to. Obviously, that potentially creates quite a performance hit, especially if you're applying it to multiple elements.

Alternative methods include this one (from zeldman.com):

text-indent: 100%; white-space: nowrap; overflow: hidden;

...or alternatively (from here):

height: 0; overflow: hidden; padding-top: 20px;

(where 'padding-top' is the height you want the element to be).

I think the first method is neater, since it lets you set height in the normal way, but I've found the second one to work better in IE7

Why is CSS text-indent not working?

This happens because your div is 200px in width. The indentation does not brake and until first space is found string is treated as one long word. After the space rest of the text appears in the box - in the second line.

You can prove I'm right by adding white-space: nowrap, so the text does not break.

Why does this technique commonly use negative text-indent?

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;
 }