html - 如何在同一 元素中混合 RTL 和 LTR 文本方向？

Question

我正在实现一个 RTL 接口(interface)。所有组件和文本都是 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 Bi-directional Algorithm 来处理嵌入的 LTR 文本。 .如果您使用 bidi-override 覆盖算法，您将负责处理 RTL 文本中的任何 LTR 文本。

This means that inside the element, reordering is strictly in sequence according to the direction property; the implicit part of the bidirectional algorithm is ignored. - (Mozilla Documentation)

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

解决方案

我能想到的唯一解决办法是

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

请参阅此 fiddler :https://jsfiddle.net/61dvmsnn/

故事的寓意

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