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>

（​是零宽度空间。）

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

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

Answer 1

这里似乎IE是错误的，因为U+200B ZERO WIDTH SPACE具有Bidi class BN（边界中性），这意味着，通过Unicode Bidi算法，它在算法中应该被忽略。并且从左到右呈现一个公共数字字符串。

使用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>数字提供正确的样式。

Answer 3

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

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

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

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

.rightLeft {display: none;}

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

.leftRight {display: none;}