Text-indent no CSS não funciona: a solução

Um recurso que utilizo com certa frequência é o text-indent do CSS. Ele serve para posicionar o texto mais para um lado ou para o outro. Por exemplo: se você tem uma div e define seu text-indent como 12px, o texto iniciará com 12px de largura da margem. Recurso interessante para formatar parágrafos.

Também muito utilizado (acho que a maioria das vezes serve para isso), é para substituir textos por imagens. Explico. Se você fez uma imagem cheia de textos e com formatação que complica fazer via código, a solução é simples: coloca o text-indent: -9999999px e a imagem de background. Feito! O texto está no código e a imagem na tela.

É importante ter o texto escrito no código por questões de SEO. No entanto, não pese a mão no recurso. O Google, que tudo sabe, sabe quando você está tentando enganá-lo. Então, sempre que possível, evite.

Ok, mas vamos ao problema. Como eu disse, sempre utilizo esse recurso com tranquilidade. Mas disse desses não tinha jeito de fazê-lo funcionar.

Um dos motivos – e este eu já sabia – é que o atributo não funciona com elementos inline. Ou seja, um <a> ou <span>, por exemplo. Apenas com elementos do tipo block ou inline-block, como parágrafos ou divs. Mesmo assim, basta setar display:inline-block  ou block em qualquer elemento que ele irá funcionar tranquilamente.

O que eu não sabia é que text-indent não funciona com textos alinhados a direita ou centralizados. Ok, eu já sabia que a margem sempre fica à esquerda, mas como eu iria colocar um valor negativo muito grande para ocultá-lo da tela, como iria imaginar que não tinha que alinhar o texto mesmo assim? Pois é, vivendo e aprendendo.

Então, para que o text-indent funcione são necessários pelo menos dois requisitos:

• display:inline-block ou display-block: o atributo não funciona com display: inline;
• text-align: left. Sem isso o atributo também não funciona.

Para saber mais, leia a documentação do W3C e veja o post do Stack Overflow onde encontrei essa solução. Este não é um truque excepcional, mas uma curiosidade interessante e que, muita vezes, por detalhes, quebramos a cabeça até encontrar a solução.