0

I have a use case where a paragraph of text could be in any language, based on data that was input by the user elsewhere. I need to display it in right-to-left or left-to-right based on the language of the value.

Note: I am not referring to the language of the whole page. I need to set the direction for this particular paragraph based on the data's language.

Is there any way to do that without using JavaScript?

Natarajan Shanker
  • 435
  • 3
  • 13
  • Note: I need to do this on the client side (browser). – Natarajan Shanker May 14 '15 at 18:48
  • Also I would like to know whats the common practice to deal with use cases like this. Do you let the text inherit the direction based on the overall language/direction of the page? Or do you use JS and detect language for each element on the page and set direction at each element level (which I don't imagine many people would do, for performance reasons). – Natarajan Shanker May 14 '15 at 18:54
  • Do you know the data's language? If you do, then you also know the direction it will have. When you are generating the page, add a class accordingly and apply the `direction` attribute as they suggest on the answers below – Alvaro Montoro May 14 '15 at 19:26
  • @AlvaroMontoro I do not know the data's language, hence the whole question :) – Natarajan Shanker May 14 '15 at 20:21
  • So you want to detect the data's language; and then, depending on it, select the direction of the text. That looks like it will need something more than just html5, css3, and JS – Alvaro Montoro May 14 '15 at 20:26
  • @AlvaroMontoro thanks, I ended up going with a JavaScript solution. – Natarajan Shanker May 15 '15 at 20:55
  • Natarajan: that's great. You should post it as an answer. That is something that could interest other people – Alvaro Montoro May 15 '15 at 21:08

2 Answers2

0

Do you mean something like that ?

#rtl {
  direction: rtl;
}
#ltr {
  direction: ltr;
}
<p id="rtl">Foo</p>
<p id="ltr">Bar</p>
  • That always sets the direction specified. My question is whether there is a way to set the direction based on the language of the value. (If the value is in Arabic or Hebrew for instance, then the paragraph should be RTL. If it the value happens to be in English, then it should be LTR). – Natarajan Shanker May 14 '15 at 18:47
  • 1
    @NatarajanShanker I don't think you can do this without javascript –  May 14 '15 at 18:50
0

Use CSS property direction:

.sometext {
    direction: [ltr|rtl|inherit];
}
Serge K
  • 375
  • 3
  • 12
  • That always sets the direction specified. My question is whether there is a way to set the direction based on the language of the value. (If the value is in Arabic or Hebrew for instance, then the paragraph should be RTL. If it the value happens to be in English, then it should be LTR). – Natarajan Shanker May 14 '15 at 18:47