How to test CSS direction: auto as an english speaker

Question

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?

Answer 1

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