HTML中从右到左的数字答案

【问题标题】：Right-to-left numbers in HTMLHTML中从右到左的数字
【发布时间】：2013-02-22 09:47:11
【问题描述】：

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

在从左到右的模式下，我希望数字显示为 12³⁴，在从右到左的模式下，我希望显示为 ³⁴12。

我试试这个 HTML 代码：

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

（&#x200b; 是一个零宽度的空格。）

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

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

【问题讨论】：

【解决方案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>

【讨论】：

【解决方案2】：

一种可能的解决方案是用<span> 标签包装每个数字。那是相当安全的。

您可能可以编写一个 javascript/jQuery 函数来遍历特定类的 <p> 标签，并用 <span> 标签将每个数字包装在其中，同时为 <sup> 数字提供正确的样式。

【讨论】：

【解决方案3】：

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

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

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

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

.rightLeft {display: none;}

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

.leftRight {display: none;}

【讨论】：