Question

我正在处理涉及多种语言文本的Web应用程序。它可以混合使用LTR语言（例如英语）和RTL语言（例如阿拉伯语）。

下面是我的代码

案例1

<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>

案例2

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

现在我的问题是，由于数字的方向性较弱，因此添加自动标签如何解决此问题？在运行时，我将不知道与数字对应的跨度。我可以在所有范围中添加dir =“ auto”吗？

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

Answer 1

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

我找不到可以说哪种实现正确的最终资源。可能这种利基案例尚未正式定义，并且这两种实现选择了合法但不同的方式来处理歧义。

双向文本中的数字和标点渲染

1 个答案: