Text-align justify but to the right?

Question

We want to make text-align:justify, to take all the width of the column, but it should start from the right side. Is there any way to make it with css or somehow?.

EDIT:

As suggested http://jsfiddle.net/dVbJr/33/

.text {
  text-align: justify;
  direction:rtl;
}

works, but it has punctuation issue.

SOLVED

    <span style="float:right">...</span>

This to be attached in the end has solved the punctuation issue. Thanks for effort though to everyone! I shall accept the first answer then.

Check out this tutorial : http://lawrence.ecorp.net/inet/samples/css-right-justify-pos-ie.php — eric.itzhak, May 21 '12 at 11:42
You should post your answer as an answer, not as an edit to your question. — Flexo, May 22 '12 at 13:15
Probably too late for that but I believe this was the idea: http://jsfiddle.net/3sf92oLg/ — Anonymous, May 10 '22 at 12:55

score 46 · Accepted Answer · answered May 21 '12 at 11:48

46

I believe you might want something like this:

direction:rtl;
text-align:justify;

Example: http://jsfiddle.net/aew75/

answered May 21 '12 at 11:48

Jason Gennaro

34,535
8
65
86

yeah that did it, but I just suddenly thought of it myself. thanks for helping anyway! – Anonymous May 21 '12 at 11:51
1

@jason i m bit of agree with your answer we use this thing but now i have implemented u direction in my code text is going reverse back see the demo:- http://jsfiddle.net/dVbJr/33/ – Shailender Arora May 21 '12 at 11:52
1

Shailender Arora you are absolutely right. it seems to have some problem with punctuation... – Anonymous May 21 '12 at 11:54
2

@ShailenderArora There is no problem with the punctuation or the implementation. That's just what happens when the text needs to split on the right. It will never look perfect; same thing happens with regular left to right justification. – Jason Gennaro May 21 '12 at 11:57
how about if we make some float right wrapper? would it possibly work? – Anonymous May 21 '12 at 11:58
12

This is not proper solution because punctuation is changed. All dots, semicolons etc. are on wrong side. – Marcin Dec 20 '13 at 13:31
Moves the punctuation. – Corey Apr 13 '16 at 20:51
Here is the point solution for chrome and Mozilla users: https://davidwalsh.name/rtl-punctuation – Pablo Glez Sep 19 '16 at 20:07
This is not the right answer for LTR languages. Shobhit's comment below `text-align-last` is correct. – Josh Cole Feb 12 '19 at 18:27

score 18 · Answer 2 · answered May 21 '12 at 12:26

text-align-last: right;
-moz-text-align-last: right;

If I understand the question correctly, the issue is really just how to right-align the last line of a justified block of text. The above does just that, using a property in CSS 3 Text (with a vendor prefix version for better support), supported by modern browsers though not universally.

Though setting the writing direction to right-to-left causes this, among other things, it has several other, more fundamental effects. You may get away with it, if you don’t ever have inherently right-to-left characters in the text.

Doesn't work in Safari, so to me not a viable solution. http://caniuse.com/#feat=css-text-align-last — Corey, Apr 13 '16 at 20:48

score 5 · Answer 3 · edited Nov 07 '19 at 13:46

5

It can be solved by adding text-align-last:

div.a {
    text-align: justify;  /* For Edge */
    text-align-last: right;
}

Source: link

edited Nov 07 '19 at 13:46

sɐunıɔןɐqɐp

3,332
15
36
40

answered Apr 30 '18 at 11:32

Shobhit Verma

794
8
25

score 4 · Answer 4 · answered Apr 25 '22 at 22:34

The best solution is:

p{
text-align: justify;
text-align-last: right;
}

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

Only there is a problem with the last punctuation mark.

score -1 · Answer 5 · answered May 21 '12 at 11:51

-1

check this sample

for right-to-left you just need to set direction:rtl

answered May 21 '12 at 11:51

Mironline

2,755
7
35
61

score -4 · Answer 6 · edited Jul 13 '12 at 15:54

-4

CSS

text-align: justify; 
text-align: right; // or text-align: left right;

edited Jul 13 '12 at 15:54

Matt

74,352
26
153
180

answered May 21 '12 at 11:44

iWizard

6,816
19
67
103

3

no offense, but this is wrong: text-align value can only be left, right, center, justify or inherit – Samuel Rossille May 21 '12 at 14:13

score -4 · Answer 7 · answered May 21 '12 at 11:49

-4

Just try this.

text-align:right justify;
direction:rtl;

answered May 21 '12 at 11:49

mohana rao

433
3
13

no offense, but this is wrong: text-align value can only be left, right, center, justify or inherit – Samuel Rossille May 21 '12 at 14:13

Text-align justify but to the right?

7 Answers7

Linked

Related