Why does dir="rtl" change order, but only sometimes?

Question

Why does

<input type="text" dir="rtl" value="08/15 word">

render into word 08/15 and not into 08/15 word?

Why does

<input type="text" dir="rtl" value="one word">

render into one word?

Why is the order switched in the first case but not in the second one?

https://jsfiddle.net/powtac/4aLn71mb/

Grube

you need to know some rtl language like arabic to understand this. Basically you should read the text then the date in both direction – Giulia

Ok, but 08/15 was not considered a date! It's some kind of product number... And wyh does "99/99 word" still switches direction? It is definitely not a date. – Grube

same thing I guess .. you should read the text then the number. I don't have the accurate explanation but you have two entites (text and number) where in the other you only have text (nothing to switch) ... try for example to add a full stop . it will also get affected because it's considered as ponctuation that should be at the end, so after the text in both direction – Giulia

You might need the bdo tags to overide. developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo – Spout

Answer 1

dir=rtl gives the base direction of the text. Within that text, words with Latin letters will still be written left-to-right and multiple words with Latin letters (i.e. English sentences) will be ordered left-to-right as well!

The same is true for e.g. Arabic in dir=ltr (default) base direction: it will be written right-to-left anyway, and multiple Arabic words will be ordered form right-to-left, even though the environment tells otherwise.

For that to work, the browser (or text renderer in general) uses the Unicode bidi algorithm. The algorithm by itself needs to know the directionality of the characters, which is part of Unicode as well. Latin and Arabic letters have a strong directionality, while the “normal” numbers have a weak left-to-right direction.

This distinction between weak and strong is made, because numbers are used in both ltr and rtl languages. The number itself is always written left-to-right, but it will be word-ordered right-to-left if surrounded by strong rtl words, and it will be word-ordered left-to-right if surrounded by strong ltr words.

If the number is not surrounded by strong typed words, the base direction is used.

Your ltr-“08/15” is not surrounded by ltr, so it is put rtl (base direction) from ltr-word “word”.

“one word” are two strong directioned words, so they are layed out ltr themselves and the words layed out ltr as well. No matter what the base direction is.

Try “first 08/15 second” and the numbers will be considered part of a bigger ltr sentence and laid out ltr.

Scamp

Answer 2

dir=RTL Characteristics

1. The order of digits in numbers (such as phone numbers) doesn’t differ from left-to-right writing.

2. When combining symbols that can be used in both RTL and LTR languages (such as periods, commas, or other punctuation marks), their displayed positions will depend on the direction of the text. This is because the data format starts from the beginning, but a browser is still processing an RTL word in the RTL direction and punctuation is converted towards the direction that has been specified.

For more information, see this article

Halsey