I am struggling to learn the usage of the unicode-bidi property. For example I thought if I set direction to a word formet with Latin Alphabet letters and assign the value embed to the unicode-bidi property the word will be isolated and will not affect the surrounding context. However the code below does the opposite of what I expected:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<span style="direction:rtl;unicode-bidi:embed"> James</span>:15<br/>
<span style="direction:rtl;"> James:</span>15
</body>
</html>
I expect the first one shows the digits on the right as the "rtl" text is isolated but the second one does it.
I know the property unicode-bidi is useful for the words in Arabic, Hebrew etc. but I wonder what happens here.
I searched Google and here to find a solid answer to what unicode-bidi does but the only things I can find are "provide one embed level" which are not clear enough to me.
Could someone explain this property and what happens in the code above?
The meaning of embedding is ultimately defined in UAX #9 Unicode Bidirectional Algorithm. I don’t want to pretend to understand all of it, but here is what I think happens in your case:
In the second part of your code, you just declare right-to-left direction for the string “ James”. This has no effect, since the direction property affects only the overall layout direction (e.g., whether table columns run left to right or right to left) and the text direction of directionally neutral text. Here the content has just Latin letters, which have strong left-to-right directionality, and a space, which adapts to the directionality of the adjacent character with strong directionality.
In the first part, however, declaring unicode-bidi:embed causes the element as a whole to be treated according to its declared directionality, right to left, even though that directionality has no impact inside the element. In a sense, it acts like a single right-to-left letter. Marking it with X, we thus have X:15. This gets rendered the same way as if X were an Arabic letter: this directionally strong letter appears on the right, then, to the left of it, the directionally weak punctuation mark “:”, and then the common digits 15 running left to right (as they do even inside Arabic text).