CSS Text-Indent Equivalent on the Right Side

css text-indent equivalent on the right side

There is none, unfortunately there is no text outdent in css, hower, you could use text direction direction:rtl; for some short texts, in that way indent will appear on the other side.

How to indent text from the right side?

It seems as though you want the text to be right-aligned with some padding so it's not right up against the side of the box.

p {  text-align:right;  padding-right: 5em;}

<p>test</p><p>test test</p><p>somethin grandom</p><p>test again</p><p>this is the last test</p>

Align right with indentation

Here you go:

p {direction:rtl;padding-right:100px;text-indent:-100px;}

This sets the css direction to be from right to left.
Then add right padding to indent the whole thing from the right
Then use a negative indent that causes the first line to be "outdented"

Your content and text-flow is still left to right (i.e. breaks on the right), it just interprets the css (e.g. paragraph text-indent) on the other side.

Here's my code:

http://jsbin.com/ukese5/7

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

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>

correct notation of css text indent

instead of pixels, use viewport units , specificallyuse vw which is viewport width which will decrease as the width of the screen gets smaller

see here more CSS Units

see snippet below :

or better see here > jsfiddle ( you can resize here better )

.feature-bar {    background-color: #f8f8f8;    height: 200px;    margin-top: 0px;    text-decoration: solid;    color: red;    text-indent: 10vw;    padding-top: 20px;}

<div class="feature-bar">Lorem ipsum dolor sit amet, aenean sed egestas ultricies eget ornare, luctus proin malesuada. A ac lacinia. Vulputate molestie suspendisse nullam. Ornare velit ac vitae, duis duis, ac diam pede netus. Ipsum nibh ipsum, phasellus id quis vitae consectetuer blandit dolor. </div><div class="feature-bar">Nec nulla placerat aliquam nulla urna tellus, ac ligula imperdiet, facilisis laoreet nec egestas, porttitor ante, wisi blandit sit erat. Vestibulum fermentum ac. Amet augue, mattis nec integer lorem lorem. Neque enim, pulvinar leo lorem donec, ac in. Etiam nec vestibulum justo praesent mi, pharetra praesent erat enim et purus sed, vel porttitor morbi voluptatem ante pellentesque ligula. In interdum tellus elit volutpat, purus gravida vitae vivamus ante quis, at amet, urna scelerisque suspendisse quis tortor vestibulum.</div>

Why Bottom line indented a bit to the right

The letter-spacing causes the top row to be 100% width of the available space, so there is no space to center within.

However, the reason that the text looks left aligned is because letter-spacing is added to the right side of a letter, not equal on both sides.

There are a few solutions:
- Add negative margin on the left
- Add left padding
- Text-indent may also be useful

---

Related Topics