New method of replacing text with a picture, or getting rid of -9999px

I would like to talk about the techniques of replacing text with an image. I think almost everyone faced moments in the layout when, for example, you need to use a graphic object for the page title, while keeping the text below it for search engines and for the printed version. And in principle, you never want to break the semantine page.

A little about the history of this issue.

The very first popular technique was the so-called FIR (also known as Fahrner Image Replacement), which appeared in 2003. It is simple as a stump, and many novice layout designers still use it:

<style> h1.text-hide span { display: none; } h1.text-hide { height: 35px; /* height of the replacement image */ background-image: url("hello-world.gif"); background-repeat: no-repeat; } </style> <h1 class="text-hide"><span>Hello world!</span><h1></code> 

Familiar thing? In fact, inside the tag, in the background of which our picture lies, we add an inline tag that duplicates the text in the picture, and then hide it with the help of display: none;
Many immediately recognized the curvature of this technique, both in terms of semantics, and in terms of weighting html with unnecessary tags. On top of that, gray optimizers fell in love with it, as a result of which some search engines applied sanctions to pages overloaded with such objects.
')

In the same year , another replacement technique appeared . She worked like this:

 #ID_OF_ELEMENT { padding: HEIGHT_OF_IMAGEpx 0 0 0; overflow: hidden; background-image: url("hello_world.gif"); background-repeat: no-repeat; height: 0px !important; height /**/:HEIGHT_OF_IMAGEpx; } 

As you can see, the hack for IE5.5 was used here, in which everything was very bad with the block model. Subsequently, this technique did not catch on, since it stopped working in some cases, plus many people do not like khaki.

-9999px

After all this, Phark's Accessible Image Replacement was born, which is currently the most popular and consists of only one line:

 .text-hide { text-indent: -9999px ( -999em); } 

Technique is not perfect, but if you do not forget about some of the nuances of its work, then it will come down for most cases. In particular, check that text-align is directed in the same direction as text-indent (in most cases text-align: left). And also, do not forget that by applying it to an element with the display: inline-block; property, this element will fly away to IE7 after the hidden text.

I, like many, was a supporter of "-9999px", but at the same time I realized that this is not the best option and that there should be a more beautiful solution to this problem. Each time, prescribing -9999px, I wondered if these pixels would affect the site in the future.

New solution

And so, a few days ago, Comrade Zeldman offered this option:

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

This method solves several problems at once:

• First, you can be sure that even the longest text that is hidden will never reach the visible container, even if the length of this text exceeds 9999px
• Secondly, at first it was discovered, and then the problem was solved in the same way, which consisted in the following: each time when setting -9999px, an invisible block of such width was added to the dom-tree. And if it had little effect on ordinary browsers, then serious problems with animation performance were revealed on iPAD ( demo for testing )

However, this method is also not perfect - if there is padding on the element, then part of the text will look out of it. The problem is solved by zeroing paddingov for those blocks where the text is hidden.

Variant Zeldman slightly revived leading front-end developers who are engaged in lively discussions in comments and blogs.
Also, he was noticed by the html5boilerplate development team, who are now actively discussing on github the topic of including a new way to hide text in the set of auxiliary classes of their boilerplate.

In the same branch, another method was proposed that has the right to life:

 .text-hide { font: 0/0 serif; text-shadow: none; color: transparent; } 

This way is also cross-browser-tested in IE7-10, Opera 11.61, Chrome 17.0, Firefox 10.0, and Safari 5.1.2. True, for older browsers this option does not work - many of them do not understand the zero value of the font. For example, some of the old Safari instead of zero may take the value 6 or 8.

Most of the information about the history and the new way learned from this post.

UPD: Another interesting method from Nicholas Gallagher with a pseudo-element , thanks for the hint SelenIT2

UPD2: In the comments to the html5-boilerplate on the githabe, the test results of three IR methods (negative text-indent, positive text-indent and font: 0/0 a) appeared in several screen readers. The variant with font: 0/0 a does not do anything in Window-Eyes (as I understood it is dying out, it is compared to IE5.5), the rest works everywhere (although with a positive text-indent, the text becomes visible during its voice acting in older versions of JAWS ).
Thanks SelenIT2 , link to comment

UPD3: Chris Coyier did a great job and assembled a whole museum dedicated to techniques. Image Replacement: CSS Image Replacement Museum