Nie działający text-indent

Napotkałem dziś prosty problem – próba ukrycia tekstu za pomocą text-indent: -9999px; kończyła się niepowodzeniem – tekst pozostawał widoczny. Okazało się, że problem powodowany był przez któryś z nadrzędnych elementów z przypisaną właściwością text-align: right;.

W uproszczeniu, struktura wyglądała następująco:

<div class="parent">
    <div class="indented">
        Cupcake ipsum dolor sit amet wafer. Pudding ice cream
		oat cake.
    </div>
</div>

<div class="indented">
    Sweet roll pudding chupa chups jelly beans gingerbread
	chocolate gingerbread sweet jelly beans.
</div>
.parent { text-align: right; }
.indented { text-indent: -9999px; }

Pierwszy div, mimo iż posiadał klasę intended pojawiał się na stronie, w przeciwieństwie do drugiego z tą samą klasą, który zgodnie z oczekiwaniami był ukryty.

Problem został rozwiązany poprzez przypisanie elementowi, który zamierzalem ukryć właściwości text-align: left;.

Dlaczego tak się działo?

Wygląda na to, że wyrównanie tekstu za pomocą text-align jest dla przeglądarki ważniejsze i prawa krawędź tekstu przylega do prawej strony bez względu na wszsystko. Kierunek tekstu w dokumencie jest domyślnie ustawiony na ltr i text-indent jest zastosowywane od lewej krawędzi. Jednak po ustawienu wyrównania do prawej przeglądarka pomija text-indent całkowicie.

W specyfikacji CSS nie znajdziemy nic wprost na temat priorytetów, czy „znoszenia się” tych dwóch właściwości poza poniższym cytatem, zdającym się potwierdzać moje przypuszczenia:

The box is indented with respect to the left (or right, for right-to-left layout) edge of the line box. User agents must render this indentation as blank space.

Rzeczywiście, gdyby dla tekstu wyrównanego do prawej (za pomocą text-align: right;) ustawić kierunek rtl, tekst byłby schowany.

Taka interpretacja być może jest uwarunkowana sposobem rozumienia tych właściwości przez wczesne przeglądarki.

SKOMENTUJ