"Right to left" 不同方向跨度的顺序

Question

我有以下 html：

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

我想做的就是让这些 spans 以相同的顺序从右到左出现，因为它们主要包含阿拉伯语文本，但也可能包含任何其他语言..

我更喜欢 CSS 解决方案而不是 html 属性（为了更灵活）

Answer 1

使用flexboxes，可以将父元素的显示设置为flex，然后添加flex-direction: row-reverse来反转元素的顺序；

.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>

或者，在某些情况下，您也可以将元素向右浮动：

.parent span {
    float: right;
}

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

还值得指出的是，还有一个 direction 属性。您可以将值设置为 rtl... 但这与您拥有的 direction="rtl" 属性相同。

.parent {
  direction: rtl;
}

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

Answer 2

span 元素默认为 unicode-bidi 属性的值 normal。这实际上意味着连续的 span 元素在双向格式中被视为一个单元。在示例中，最后两个 span 元素仅包含拉丁字母、空格、数字和 Ascii 引号，因此它们将被视为一个字符串 "arabic 3" "arabic 4"，因此将从左到右呈现.

如果在 span 元素上设置 unicode-bidi: embed，它们将被视为根据 direction 属性设置的布局方向（即由其父级的 HTML dir 属性隐式设置。

<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>

"Right to left" 不同方向跨度的顺序

"Right to left" order of different directioned spans

html

css

arabic

right-to-left