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

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/

Answers


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>

CSS 3 Specs:

“This property specifies the indentation of the first line of text in a block container. More precisely, it specifies the indentation of the first box that flows into the block's first line box. The box is indented with respect to the left (or right, for right-to-left layout) edge of the line box. …”

“Note: Since the 'text-indent' property inherits, when specified on a block element, it will affect descendant inline-block elements.”

May be the last quote can explain magic display: inline-block; effect.

Also, accordingly to this answer to similar question. direction: rtl; force element to respect css spec: “box is indented with respect to the left (or right, for right-to-left layout”. I think text-align: right; works in similar way.


So... I found something interesting on this.

If you have an element with text-align:right and you indent the text left (text-indent:-9999px) the text will show.

I guess aligning text one direction and indenting another is rather contradictory. However, changing the text-indent to a positive number (text-indent:9999px) the indent is respected.

On another note, another (more elegant?) solution is to not indent the text at all but to push it outside the element.

Fiddle: http://jsfiddle.net/robche/TNdbh/


Just change text-indent:-9999px to text-indent:9999px when combined with text-align: right


white-space: nowrap property solved the issue in my anchor element.


Need Your Help

How to calculate the odds of a collision in hash algorithms?

algorithm math hash

Say I have a hash algorithm, and it's nice and smooth (The odds of any one hash value coming up are the same as any other value).

Logout: GET or POST?

architecture rest post get

This question is not about when to use GET or POST in general; it is about which is the recommended one for handling logging out of a web application. I have found plenty of information on the