在 HTML 中混合 RTL 和 LTR 文本

Question

.red {
  color: red;
  direction: rtl;
}

.green {
  color: green;
  direction: rtl;
}

p {
  direction: ltr;
}

<p>Example: 
1. <span class="red">ااڡوںںطں، ااڡوںںطو</span> 
2. <span class="green">ااقونيطن هو قاتل النمر</span> 
</p>

上面的HTML和CSS渲染成这样：

请注意，在 HTML 中，'red' 按从左到右的顺序出现在 'green' 之前，而渲染将它们交换了。

如果我替换“2”。对于任何拉丁字母，跨度都会交换到正确的位置。

如何让两个跨度（以及 <p> 的所有直接子级）按从左到右的顺序出现？

CSS-首选解决方案。

Answer 1

您可以在父元素中使用 dir="rtl" 属性

.red {
  color: red;
}

.green {
  color: green;
}

p {
  
}

  <p dir="rtl">Example: <span class="red">ااڡوںںطں، ااڡوںںطو</span>... <span class="green">ااقونيطن هو قاتل النمر</span> 
    </p>

Answer 2

您当前的文本之所以如此，是因为数字没有 "strong direction"，并且可以嵌入到任一方向的文本中。无论您的标记和 CSS 是什么，浏览器都会将“ااڡوںںطں، امونيطن هو قاتل النمر” 视为单个字符串，并确定它应该从右到左呈现。

用拉丁字母（或单词）替换“2”会强制将字符串分成三个部分并改变方向。

要强制浏览器将阿拉伯文本的两个部分分开处理，您可以对红色和绿色部分使用 the bdi (Bi-Direction Isolate) element 而不是 span。请注意，您无需指定任何文本的特定方向，浏览器将根据 Unicode 规则进行计算。

.red {
  color: red;
}

.green {
  color: green;
}

<p>Example:
1. <bdi class="red">ااڡوںںطں، ااڡوںںطو</bdi> 
2. <bdi class="green">ااقونيطن هو قاتل النمر</bdi>
</p>

CSS 的唯一等效项是 unicode-bidi: isolate;，尽管 MDN 指出不鼓励直接使用它以支持暗示它的元素（大概包括 bdi）。

.red {
  color: red;
  unicode-bidi: isolate;
}

.green {
  color: green;
  unicode-bidi: isolate;
}

<p>Example:
1. <span class="red">ااڡوںںطں، ااڡوںںطو</span> 
2. <span class="green">ااقونيطن هو قاتل النمر</span>
</p>

Mixing RTL and LTR text in HTML