"Right to left" order of different directioned spans

Question

I have the following html:

<div dir="rtl">
    <span>"arabic 1"</span>
    <span>"عربي 2"</span>
    <span>"arabic 3"</span>
    <span>"arabic 4"</span>
</div>

All I am trying to do is to make those spans appear in the same order they are from right to left because they are mainly containing Arabic text, but also possibly any other language..

I prefer CSS solutions to html attributes (for more flexibility)

Answer 1

The span element has by default the value normal for the unicode-bidi property. This means, in effect, that consecutive span elements are treated as one unit in bidirectional formatting. In the example case, the last two span elements contain just Latin letters, spaces, digits, and Ascii quotation marks, so they will be treated as one string "arabic 3" "arabic 4", which will thus be rendered left to right.

If you set unicode-bidi: embed on the span elements, they will be treated as units laid according to the layout direction set by the direction property (which is implicitly set by the HTML dir attribute) of their parent.

<style>
span { unicode-bidi: embed; }
</style>
<div dir="rtl">
<span>"arabic 1"</span>
<span>"عربي 2"</span>
<span>"arabic 3"</span>
<span>"arabic 4"</span>
</div>