Search code examples
csshtmlinternationalizationright-to-left

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?


Solution

  • 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.