如何在同一个 <option> 元素中混合 RTL 和 LTR 文本方向？

Question

我正在实现一个 RTL 接口。所有组件和文本都是 RTL，但数字是 LTR。

我使用<span dir="ltr">元素将 LTR 文本插入到主要的 RTL 文本中。

它适用于大多数情况，但不适用于<option>元素：

<div dir="rtl">
  <select>
    <option>One amount <span dir="ltr">15.000</span> coins</option>
    <option>Other amount <span dir="ltr">19?000</span> coins</option>
  </select>
</div>

它不工作。

这里有一个 JSfiddle 可以玩：https ://jsfiddle.net/fguillen/2hngzv3d/

Answer 1

一开始，我认为这是一个错误（与 相关unicode-bidi: bidi-override），但是当我在 IE、Edge 和 Firefox 上尝试时，它们都给出了大致相同的结果。这给了我足够的证据证明这是正常行为。我四处张望，发现出了什么问题。

该<option>标签

该option标签是有点特殊。从 Mozilla < option > 文档中，它声明您只能在其中写入文本。这意味着您在<option>标签内编写的任何标签，都会被浏览器解析器忽略，这正是您的<span>标签被忽略的原因。从 Firefox DOM 检查器中查看下图。还值得一提的是，智能手机在微调器中显示选择选项而不是组合框（当然你可以覆盖它）。这意味着在<option>标签中包含文本以外的任何内容真的毫无意义。

理解unicode-bidi属性

默认情况下，RTL 文本足够智能，可以通过应用Unicode 双向算法来处理嵌入的 LTR 文本。如果您使用 bidi-override 覆盖算法，您将负责处理 RTL 文本中的任何 LTR 文本。

这意味着在元素内部，根据方向属性严格按顺序重新排序；双向算法的隐含部分被忽略。-（Mozilla 文档）

现在，在您的情况下，您不能放置<span>inside，<option>因为它是无效的 HTML，也不能使用‎字符，因为您禁用了 bidi 算法。

解决方案

我能想到的唯一解决方案是

• 第 1 步：删除双向覆盖。
• 第 2 步：使用 RTL 文本而不是英文文本。

看到这个小提琴手：https : //jsfiddle.net/61dvmsnn/

故事的道德启示

除非您要尝试创建镜像效果，否则切勿使用 bidi-override。永远不要禁用比迪算法。此外，在 RTL 元素内部进行测试时，始终使用 RTL 文本（例如阿拉伯语、希伯来语、波斯语...）。让比迪算法发挥它的魔力。