html - 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 行为？

score 2 · Accepted Answer

好像这里IE是错的，因为U+200B ZERO WIDTH SPACE有Bidi Class BN (Boundary Neutral)，也就是说，按照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>

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

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

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

.rightLeft {display: none;}

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

.leftRight {display: none;}

3 回答 3