text-indent does not work while text-align: right

css

Solution

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>

Problem

Original source

Related problems

• Align right with indentation