Номера справа налево в 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 имеет биди класса BN (граничный нейтраль), что означает, что он должен быть проигнорирован в алгоритме. И строка общих цифр отображается слева направо.

Использование 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;}