在 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 中，从左到右的顺序中，“红色”在“绿色”之前，而渲染已将它们交换。

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

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

首选仅使用 CSS 的解决方案。

Answer 1

您当前的文本行为如此的原因是数字没有“强方向”，并且可以以任一方向嵌入文本中。不管你的标记和 CSS，浏览器都会看到“????????? ?????????? 2. ?????????? ?? ?????? ????? ” 作为单个字符串，并确定它应该从右到左呈现。

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

要强制浏览器对待阿拉伯文字的两个部分隔离，可以使用的bdi（双向）株元素，而不是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>