CODEWITHSUNDEEP
csshtmlinternationalizationright-to-left
RandomUser
RandomUser

Reputation: 4220

How to test CSS direction: auto as an english speaker

I see that I can apply attribute direction: rtl to force right to left alignment:

https://www.w3.org/International/questions/qa-html-dir

It also mentions that HTML5 supports direction: auto, based on the users language. As I only know english, I can set the browser to force RTL layout with within the chrome config:

chrome://flags/#force-ui-direction

However the layout of the page I'm working on is unchanged unless I edit the css for the top level element to have the property: direction rtl. Am I correct in assuming that if you define:

direction: auto

That your page will automatically use rtl or ltr element alignment based on the users selected language? If so, why isn't it working from my test above?

If not, how can I selectively include direction: rtl ONLY if the users language is an rtl language?

Upvotes: 4

Views: 3344

Answers (3)

user3311145
user3311145

Reputation: 31

you have to write dir="auto" like below tags:

< input type="text" dir="auto" valu="hello"/>

< input type="text" dir="auto" valu="سلام"/>

< p dir="auto" class="u2" style="width:100px">T: ما اسمك؟< /p> < p dir="auto" class="u1">S: Thanks.< /p>

Upvotes: 0

Mamrezo
Mamrezo

Reputation: 1509

To make direction works on text's automatically, you can use another CSS property with direction, which is unicode-bidi:

* { /* Or what selector you need */
  unicode-bidi: plaintext;
  text-align: start; /* Align text automatically left/right*/
}

But this just works on the text's not element direction!

Using this will force <input> text-align from user input, for example, if the user tries to enter text in English this will work like text-align: left and for Arabic input works like setting text-align: right.

See also Browser Compatibility

Upvotes: 7

Nieminen
Nieminen

Reputation: 1284

The best way I can think of to do this, would be to use Javascript to figure out the display language. If you check out this post it describes a google language api that can give you the info you need.

Once the language and type is detected, I would add a class to your body element, that your css listens for to change the ltr or rtl.

Upvotes: 2

Related Questions