如何将RTL和LTR文本方向混合在一起 元件？

Posted 2021-04-20

我正在实现一个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/

答案

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

The <option> tag

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

Understanding unicode-bidi Attribute

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

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

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

The Solution

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

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

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

Moral of the story

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

另一答案

你必须使用像这样的display:inline-block;属性：

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