HTML中从右到左的数字

Question

我需要在HTML中格式化两个数字。有时它们嵌入在从左到右的文本中，有时以从右到左的文本嵌入。

从左到右模式我希望数字显示为12 ³⁴ ，从右到左模式我想要 ³⁴ 12。

我试试这个HTML代码：

<p style="direction: rtl;">12&#x200b;<sup>34</sup></p>
<p style="direction: ltr;">12&#x200b;<sup>34</sup></p>

（​是零宽度空间。）

在Internet Explorer 9中，这正是我想要的;但在Firefox 19和Chrome 24中，我在这两种情况下得到12 ³⁴ （尽管浏览器正确地将文本对齐）。

哪些浏览器可以正常工作？如何在所有浏览器中实现Internet Explorer行为？

Answer 1

似乎IE在这里是错误的，因为U + 200B ZERO WIDTH SPACE具有Bidi Class BN（Boundary Neutral），这意味着Unicode bidi algorithm在算法中应该忽略它。并且从左到右呈现一串常用数字。

使用U + 200A HAIR SPACE代替修复它（它的Bidi类是WS，Whitespace），虽然它具有创建一些额外空间的效果，并且一些非常古老的浏览器（如IE 6）可能会将其显示为一个框。使用它，你会写

<p style="direction: rtl;">12&#x200a;<sup>34</sup></p>    
<p style="direction: ltr;">12&#x200a;<sup>34</sup></p>

Answer 2

可能的解决方案是使用<span>代码包装每个数字。这很安全。

您可以编写一个javascript / jQuery函数来迭代特定类的<p>标记，并使用<span>标记将其中的每个数字包装起来，同时为{{<sup标记提供正确的样式1}}＆GT;位数。

Answer 3

另一个解决方案是实际显示两个版本并使用CSS样式显示正确的版本：

<sup class="rightLeft">34</sup>12<sup class="leftRight">34</sup>

...然后在不同的样式表中设置CSS，如下所示：

样式表1 - 从左到右格式：

.rightLeft {display: none;}

样式表2 - 从右到左格式：

.leftRight {display: none;}