如何在同一<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

一开始，我认为这是一个bug（与unicode-bidi: bidi-override相关的东西），但是当我尝试使用IE，Edge和Firefox时，它们都给出了相同的结果。这给了我足够的证据证明这是一种正常行为。我到处看看，发现了什么错。

<option>代码

option标签有点特别。来自Mozilla＆lt; {{}}＆gt;文档，它声明您只能在其中写入文本。这意味着您在<option>标记内写的任何标记，浏览器解析器都会忽略它，这正是您忽略<span>标记的原因。从Firefox DOM检查器中查看下图。还值得一提的是智能手机在微调器中显示选择选项而不是组合框（当然你可以覆盖它）。这意味着在<option>标记内除了文本之外还有其他任何东西都没有意义。

option

了解unicode-bidi属性

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

  

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

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

解决方案

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

• 第1步：删除bidi-override。
• 第2步：使用RTL文本而不是英文文本。

请参阅此fiddler：Unicode Bi-directional Algorithm

故事的道德

除非您尝试创建镜像效果，否则请勿使用bidi-override。永远不要禁用bidi算法。此外，在RTL元素内部测试时，始终使用RTL文本（例如阿拉伯语，希伯来语，波斯语......）。让bidi算法发挥其神奇作用。

Answer 2

您必须使用display:inline-block;属性，如下所示：

<span style="display:inline-block !important; direction:ltr !important; text-align:left !important;">cntent</span>