HTML中RTL与LTR文本混合渲染顺序异常的CSS解决方案问询

我来帮你搞定这个双向文本（BiDi）渲染的小坑！先把你的问题代码重现出来，方便大家理解场景：

问题代码重现 #

CSS代码：

.red { color: red; direction: rtl; }
.green { color: green; direction: rtl; }
p { direction: ltr; }

HTML代码：

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

问题原因分析 #

这个现象是浏览器双向文本算法在搞鬼：

• 阿拉伯语属于RTL（从右到左）字符，即使父元素<p>设置了direction: ltr，子元素<span>的direction: rtl会让浏览器把这些span识别为RTL上下文的内容。
• 对于内联的RTL文本块，浏览器会自动调整它们的显示顺序，让RTL内容整体靠右排列，导致原本DOM中在前的.red span被挤到了.green span的右边。
• 当你把“2.”换成拉丁字母时，周围有大量LTR字符，BiDi算法会优先遵循父元素的LTR上下文，所以顺序就恢复正常了。

纯CSS解决方案 #

要让<p>的所有直接子元素严格按照HTML中的DOM顺序（左到右）显示，不受BiDi算法干扰，有两个靠谱的纯CSS方法：

方法1：用unicode-bidi: isolate隔离双向上下文（推荐）

这个属性会把每个子元素的内容包装成独立的双向上下文，浏览器不会将它和周围文本进行顺序调整，完美保留DOM顺序：

p > * {
  unicode-bidi: isolate;
}

方法2：转为内联块级元素

把直接子元素设为inline-block后，浏览器会按照DOM顺序排列这些块级化的内联元素，不会触发内联文本的BiDi重排：

p > * {
  display: inline-block;
  /* 可选：添加一点右侧间距，保持原有视觉布局 */
  margin-right: 0.5em;
}

验证效果 #

应用上面任意一种CSS后，不管<span>里是阿拉伯文还是其他文本，都会严格按照DOM中.red在前、.green在后的顺序显示，再也不会出现反转的情况。

内容的提问来源于stack exchange，提问作者Sergey Slepov