如何在混合RTL的<pre>标签中实现英文文本从右到左渲染？

我有如下代码：

<html>
<head>
  <style>
    .rtl {
      direction: rtl;
      font-size: 16px;
      font-family: Arial, Helvetica;
    }
  </style>
</head>
<body>
<pre class="rtl">
שלום עולם <b>Right Text</b> ..... <b>Left Text</b> חמש
</pre>
</body>
</html>

当前渲染时，“Left Text”显示在“שלום עולם”左侧，“Right Text”显示在“חמש”右侧。但制作目录时需要主题在右侧、作者在左侧，因此需要实现相反效果——让“Right Text”显示在“שלום עולם”左侧，“Left Text”显示在“חמש”右侧，同时保留<pre>标签。

当前渲染状态：

预期渲染效果：

解决方案 #

方案1：使用Unicode双向控制字符

通过添加Unicode控制字符强制英文文本反向排版：

• \u202E：强制文本从右到左显示
• \u202C：恢复默认排版方向

修改后的代码：

<html>
<head>
  <style>
    .rtl {
      direction: rtl;
      font-size: 16px;
      font-family: Arial, Helvetica;
    }
  </style>
</head>
<body>
<pre class="rtl">
שלום עולם <b>‏Right Text‏</b> ..... <b>‏Left Text‏</b> חמש
</pre>
</body>
</html>

注：代码中<b>标签内的英文前后已添加不可见的\u202E和\u202C控制字符

方案2：使用CSS强制方向

给包含英文的元素添加CSS样式，覆盖默认双向文本规则：

<html>
<head>
  <style>
    .rtl {
      direction: rtl;
      font-size: 16px;
      font-family: Arial, Helvetica;
    }
    .rtl b {
      direction: ltr;
      unicode-bidi: bidi-override;
    }
  </style>
</head>
<body>
<pre class="rtl">
שלום עולם <b>Right Text</b> ..... <b>Left Text</b> חמש
</pre>
</body>
</html>

unicode-bidi: bidi-override会强制文本按指定的ltr方向排版，忽略RTL容器的默认规则。

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