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)上正确显示.

Answer 1

您可以在数字序列之前和之后嵌入从左到右和从右到左的标记字符(&lrm;和&rlm;分别) - 这不需要任何额外的标记,也不需要分隔符,并且将保留源文档中的文本顺序.

另一种方法是使用一些标记来用破折号分隔数字(类似于你所做的),因为Unicode BIDI算法在没有帮助(lrm和rlm)的情况下不能很好地处理这个特定的情况.

没有必要像你一样内联CSS,但你仍然需要这样的东西:

CSS:

.numdash
{
  direction: ltr;
}

HTML:

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

第三种选择是反转数字,只需在标记中使用0-4,并通过bidi算法反转.

Answer 2

还有另一种方法可以通过在数字前附加来做到这一点:

<span>&#x200E;+44 780-780-7807</span>

Answer 3

使用这个类：

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

所以你的 HTML 代码应该是这样的：

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

Answer 4

对我而言，遵循风格非常有效：

* {
    unicode-bidi: embed;
}

您可以在CodePen上查看此示例（我不知道希伯来语，所以我从这里复制了一些文本）