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

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

用拉丁字母(或单词)替换“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>