双向文本中的数字和标点符号呈现

Question

我正在开发处理多语言文本的 Web 应用程序。它可以混合使用英语等 LTR 语言和阿拉伯语等 RTL 语言。

下面是我的代码

案例一

<div style="direction: rtl;"><div ><span >
    <span>تتتتتتتتت   يصيصيصيي </span>
    <span>1234  5678</span>
</span></div></div>

预期产出

                                             1234 5678 تتتتتتتتت   يصيصيصيي

实际产量

                                               تتتتتتتتت يصيصيصيي 1234 5678

案例 2

<div style="direction: rtl;"><div ><span >
    <span>تتتتتتتتت   يصيصيصيي </span>
    <span>abc</span>
    <span>1234  5678</span>
</span></div></div>

预期产出

                                           1234 5678 abc تتتتتتتتت   يصيصيصيي

实际产量

                                            abc 1234 5678 تتتتتتتتت يصيصيصيي

为了解决这个问题，我添加了 dir="auto" 标签来跨越数字。它得到了正确的呈现。我不明白为什么这是有效的，它是否适用于所有情况。

案例 1

<div style="direction: rtl;"><div ><span >
    <span>تتتتتتتتت   يصيصيصيي </span>
    <span dir="auto">1234  5678</span>
</span></div></div>

案例二

<div style="direction: rtl;"><div ><span >
    <span>تتتتتتتتت   يصيصيصيي </span>
    <span>abc</span>
    <span dir="auto">1234  5678</span>
</span></div></div>

现在我的问题是，由于数字的方向性弱，添加自动标签如何解决这个问题？我不会在运行时知道number对应的span。我可以将 dir="auto" 添加到所有跨度吗？

这个问题的正确解决方法是什么。 span 的内部文本可以是任何语言（不一定是英文数字）。

Answer 1

默认情况下，<span> 和 <div> 从父级继承它们的 dir 属性。这意味着 dir="auto" 将改变这些跨度的行为。对于仅数字，Chrome 中带有 dir="auto" 的单独跨度会重置布局方向，并使用（弱）LTR。请注意，在 Edge 上，这个弱点得到了解决，即使 dir="auto".

，数字跨度也被布局为 RTL

我找不到可以说明哪种实现是正确的最终来源。可能这个小众案例没有官方定义，两种实现选择了合法但不同的方式来处理歧义。

双向文本中的数字和标点符号呈现

Number and punctuation rendering in bidirectional text

html

css

bidi

right-to-left