CODEWITHSUNDEEP
htmlcssarabicright-to-left
Alaa Saleh
Alaa Saleh

Reputation: 187

"Right to left" order of different directioned spans

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)

Upvotes: 3

Views: 1672

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201876

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>

Upvotes: 4

Josh Crozier
Josh Crozier

Reputation: 241208

Using flexboxes, you could set the display of the parent element to flex, and then add flex-direction: row-reverse to reverse the order of the elements;

.parent {
    display: flex;
    flex-direction: row-reverse;
}
<div class="parent">
    <span>"arabic 1"</span>
    <span>"عربي 2"</span>
    <span>"arabic 3"</span>
    <span>"arabic 4"</span>
</div>

Alternatively, in some cases, you may also be able to float the elements to the right:

.parent span {
    float: right;
}
<div class="parent">
    <span>"arabic 1"</span>
    <span>"عربي 2"</span>
    <span>"arabic 3"</span>
    <span>"arabic 4"</span>
</div>

It's also worth pointing out that there is a direction property, too. You could set the value to rtl... but that's the same as the direction="rtl" attribute that you had.

.parent {
  direction: rtl;
}
<div class="parent">
  <span>"arabic 1"</span>
  <span>"عربي 2"</span>
  <span>"arabic 3"</span>
  <span>"arabic 4"</span>
</div>

Upvotes: 1

Related Questions