带direction="rtl"的pre标签中HTML属性引号显示异常的排查与修复

问题现象 #

给pre标签设置direction="rtl"后，内部包含引号的HTML转义标签出现显示错乱。例如：
原代码：

<pre direction="rtl"><code>&lt;html meta=&quot;test&quot;&gt;</code></pre>

实际显示结果为：<"html meta="test>，引号位置被错误颠倒，且无法使用unicode-bidi: bidi-override（会破坏HTML标签的原有结构）。

问题原因 #

这是**双向文本算法（BiDi）**的自动排序逻辑导致的。在RTL（从右到左）排版环境中，BiDi会根据字符的方向性自动调整文本顺序，引号这类中性字符会被周围的LTR（从左到右）字符影响，导致位置错乱，打乱了HTML转义标签的原有结构。

修复方案 #

方案1：插入双向控制字符 #

在引号这类中性字符前后插入‎（左到右标记），强制BiDi算法保留文本的正确顺序，示例代码：

<pre direction="rtl"><code>&lt;html meta=&lrm;&quot;test&quot;&lrm;&gt;</code></pre>

方案2：使用CSS隔离文本块 #

给pre内部的code标签添加unicode-bidi: isolate属性，让code内的文本作为独立隔离块处理，不受外部RTL环境的排序干扰：

pre[direction="rtl"] code {
  unicode-bidi: isolate;
}

该方案无需修改HTML内容，仅通过CSS即可解决问题，且不会破坏HTML标签的原有结构。

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