Question

Today I have had a problem with hiding text with text-indent: -9999px rule. I realized that it was caused by some parent element which has had text-align: right. Example on jsfiddle. Setting text-indent to positive value of 9999px did not work as well.

I have managed to hide text by setting it’s text-align to the left, but I do not understand why such problem occurred.

Could someone explain why text-indenting does not work while text-align is set to the right?

Fiddle with ids:
http://jsfiddle.net/sNbfv/2/

Answer 1

It seems that maintaining the alignment is more important to the browser, so the right edge of the text is kept to the right side, no matter what.

The document is set to the ltr direction, so the indent is applied to the left of the line, but since you’ve said you want it to align to the right, the browser disregards the indent entirely. I have no explanation as to why this happens, other than early browsers setting a precedence of justification importance. There is nothing in the CSS spec as far as text-align explicitly ignoring text-indent.

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.

http://www.w3.org/TR/CSS2/text.html#propdef-text-indent

If we update the fiddle to have an rtl direction, the indent indeed affects the right side of the text. I’ve added a border to show that the overflow is happening.

http://jsfiddle.net/sNbfv/3/

.rtl{direction:rtl;}
.parent { text-align: right; border:1px solid blue}
.indented { text-indent: -9999px; }

<div class="rtl">
    <div class="parent">
        <div class="indented">
            Lorem ipsum ipsum!
        </div>
    </div>

    <div class="indented">
        Cupcake ipsum!
    </div>
</div>

---

The simple solution seems to be aligning that nested indent to text-align:left.

http://jsfiddle.net/sNbfv/4/

.parent { text-align: right; border:1px solid blue}
.indented { text-indent: -9999px; }
.parent .indented{ text-align:left; }

<div class="parent">
    <div class="indented">
        Lorem ipsum ipsum!
    </div>
</div>

<div class="indented">
    Cupcake ipsum!
</div>