RTL在网页上使用破折号翻转数字

Question

当我的网站显示带数字的希伯来文本，并且数字中间有一个破折号时，该数字会以 RTL 显示。例如，在文本中：רמה 4–0，它应该显示为4-0而不是0-4，因为它是一个数字序列，而 '4' 在 '0'之前。 然而，在我检查过的浏览器上，它会在 '4'之前显示 '0'。

由于这可能发生在系统数据显示的任何地方，因此最好有一个 CSS 解决方案，不需要类似以下内容的东西：

<span style="direction:ltr">4-0</span>

文本的一般方向应该保持RTL，但带有破折号的数字应该显示LTR。在主要浏览器（IE、Firefox、Chrome）上应该能正确显示。

- Yirmiyahu Fischer

---

请将您的内容放入<bdi></bdi>标签中。 - ako

Answer 1

还有一种方法可以通过在数字之前添加‎来实现：

<span>&#x200E;[phone]</span>

- Carlos Martinez T

Answer 2

您可以在数字序列之前和之后嵌入left-to-right和right-to-left标记字符（分别为‎和‏），这不需要任何额外的标记，没有分隔符，并且将保留源文档中的文本顺序。

另一种选择是使用一些标记来使用破折号界定数字（类似于您所做的），因为Unicode BIDI算法在没有帮助（lrm和rlm）的情况下无法很好地处理此特定场景。

您无需像您所做的那样将CSS设置为内联，但仍需要类似于以下内容：

CSS：

.numdash
{
  direction: ltr;
}

HTML：

<span class="numdash">4-0</span>

第三个选择是反转数字并仅在标记中使用0-4，然后通过双向算法将其反转。

- Oded

---

没有解决问题，只是将文本左对齐了！ - Hamed Zakery Miab

Answer 3

对我来说，以下的样式完美地发挥了作用：

* {
    unicode-bidi: embed;
}

你可以在CodePen上检查这个例子（我不会希伯来语，所以我从这里复制了一些文字）

- A.Alinia

Answer 4

使用这个类：

.number_ltr {
    direction: ltr!important;
    unicode-bidi: embed;
}

因此，您的HTML代码应如下所示：

<span class="number_ltr">4-0</span>

- Bassem Shahin

Answer 5

这是BIDI算法如何处理您的文本： （来自https://util.unicode.org/UnicodeJsps/bidi.jsp?a=%D7%A8%D7%9E%D7%94+4%E2%80%930&p=RTL）

你有四个运行：'HEBREW'、'4'、'-'、'0'，它们按RTL顺序排序：'0'、'-'、'4'、'HEBREW'。

如果你想让'4-0'被视为一个运行，请用标签将其括起来。

<div dir="rtl">רמה <bdi>4–0</bdi></div>

这将给你“HEBREW”，“4-0”的解决方案，渲染RTL，如4-0 רמה。

然而，最简单的方法是使用连字符（-）而不是你正在使用的en dash（–）。使用连字符将给您正确的结果：

- Vinicius Fortuna

Answer 6

将您的内容放在<bdi></bdi>标记中。- 这个方法非常好用！

- SimPHP

Answer 7

提到 ‎ 和 ‏ 的答案是正确的。在“弱”方向（标点符号或数字，没有像拉丁字母或阿拉伯/希伯来字母那样的“强”方向）的符号之前或之后插入这些不可见标记将确保弱字符继承所需的方向。

“BiDi”/双向文本维基百科文章对这个问题及Unicode解释器如何处理混合方向文本有很好的描述。它帮助我更好地理解了这个问题：

http://en.wikipedia.org/wiki/Bi-directional_text

我个人的解决方案是避免使用‎/‏符号，因为我正在构建一个需要在双向工作的站点，并插入内容会造成巨大混乱。相反，它们可以通过CSS的“before”和“after”属性自动插入。这是一个例子，使用"\200F" unicode设计来表示RLM标记：

#RIGHT-TO-LEFT-MARKER-CONTENT,
.contributor:after,
/*.contributor:before,*/
.right-to-left-marker-content {
    /*Inserts ‏ marker to ensure
    the contained content is always 
    displayed RTL*/
    content: "\200F";
}

（注意，CSS采用“DRY CSS”格式，允许您根据需要添加选择器，以避免重复声明实际样式声明。重要的部分只是您拥有内容：“\200F”，并且您根据需要将:before或:after添加到选择器中。）

- jerclarke

Answer 8

请勿考虑翻转顺序，因为这样做会导致用户在尝试将其复制粘贴到另一个应用程序时结果也被翻转。相反，您可能对非 CSS 解决方案感兴趣：

LRM/RLM‍

‍

LRE/RLE…PDF

- Tomer Cohen

---

你能解释一下PDF在这里的相关性吗？ - Oded

@Oded：PDF代表弹出方向格式。当您使用RLE/LRE/RLO/LRO时，您声明了一个方向块的开始，而PDF字符则声明了其结束。更多信息请参见：http://unicode.org/reports/tr9/#Terminating_Explicit_Directional_Code - Tomer Cohen

谢谢提供信息 - 我不明白便携式文档格式与此有何关系 ;) - Oded