时间戳

首页 > 解决方案 > 双向文本中的数字和标点符号呈现

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

问题描述

我正在开发处理多语言文本的网络应用程序。它可以混合使用 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>

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

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

标签： htmlcssright-to-leftbidi

解决方案

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

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

推荐阅读