如何在同一个 <option> 元素中混合 RTL 和 LTR 文本方向？
How to mix RTL and LTR text directions in the same <option> element?
我正在实现一个 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/
一开始，我认为这是一个错误（与 unicode-bidi: bidi-override 有关的东西），但是当我在 IE、Edge 和 Firefox 上尝试时，它们都给出了相同的结果。这给了我足够的证据证明这是一种正常的行为。我环顾四周，发现了问题所在。
<option> 标签
option 标签有些特殊。从 Mozilla <option> 文档中，它指出您只能在其中写入文本。这意味着您在 <option> 标签内写入的任何标签都会被浏览器解析器忽略，这正是您的 <span> 标签被忽略的原因。从 Firefox DOM 检查器中查看下图。还值得一提的是，智能手机在微调器而不是组合框中显示 select 选项（当然你可以覆盖它）。这意味着 <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 也不能使用 &LRM; 字符，因为你禁用了 bidi 算法。
解决方案
我能想到的唯一解决办法是
- 第 1 步：移除双向覆盖。
- 第 2 步：使用 RTL 文本而不是英文文本。
看到这个提琴手：https://jsfiddle.net/61dvmsnn/
故事的寓意
除非您尝试创建镜像效果，否则切勿使用双向覆盖。永远不要禁用 bidi 算法。此外，在 RTL 元素内部进行测试时，始终使用 RTL 文本（例如阿拉伯语、希伯来语、波斯语......）。让 bidi 算法发挥它的魔力。
您必须像这样使用 display:inline-block; 属性：
<span style="display:inline-block !important; direction:ltr !important; text-align:left !important;">content</span>
我正在实现一个 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/
一开始，我认为这是一个错误（与 unicode-bidi: bidi-override 有关的东西），但是当我在 IE、Edge 和 Firefox 上尝试时，它们都给出了相同的结果。这给了我足够的证据证明这是一种正常的行为。我环顾四周，发现了问题所在。
<option> 标签
option 标签有些特殊。从 Mozilla <option> 文档中，它指出您只能在其中写入文本。这意味着您在 <option> 标签内写入的任何标签都会被浏览器解析器忽略，这正是您的 <span> 标签被忽略的原因。从 Firefox DOM 检查器中查看下图。还值得一提的是，智能手机在微调器而不是组合框中显示 select 选项（当然你可以覆盖它）。这意味着 <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 也不能使用 &LRM; 字符，因为你禁用了 bidi 算法。
解决方案
我能想到的唯一解决办法是
- 第 1 步：移除双向覆盖。
- 第 2 步：使用 RTL 文本而不是英文文本。
看到这个提琴手：https://jsfiddle.net/61dvmsnn/
故事的寓意
除非您尝试创建镜像效果，否则切勿使用双向覆盖。永远不要禁用 bidi 算法。此外，在 RTL 元素内部进行测试时，始终使用 RTL 文本（例如阿拉伯语、希伯来语、波斯语......）。让 bidi 算法发挥它的魔力。
您必须像这样使用 display:inline-block; 属性：
<span style="display:inline-block !important; direction:ltr !important; text-align:left !important;">content</span>