CODEWITHSUNDEEP
htmlright-to-left
oz1cz
oz1cz

Reputation: 5834

Right-to-left numbers in HTML

I need to format two numbers in HTML. Sometimes they are embedded in left-to-right text, sometimes in right-to-left text.

In left-to-right mode I want the numbers to appear as 1234, in right-to-left mode I want 3412.

I try this HTML code:

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

(&#x200b; is a zero-width space.)

In Internet Explorer 9, this gives me exactly what I want; but in Firefox 19 and Chrome 24 I get 1234 in both cases (although the browsers correctly align the text to the right).

Which browsers work as they should? How can I achieve the Internet Explorer behaviour in all browsers?

Upvotes: 3

Views: 1985

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201768

It seems that IE is wrong here, because U+200B ZERO WIDTH SPACE has Bidi Class BN (Boundary Neutral), which means, by the Unicode bidi algorithm, that it shall be ignored in the algorithm. And a string of common digits is rendered left to right.

Using U+200A HAIR SPACE instead fixes this (its Bidi Class is WS, Whitespace), though it has the effect of creating a little extra space, and some really old browsers like IE 6 may display it as a box. Using it, you would write

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

Upvotes: 1

user1945782
user1945782

Reputation:

Another solution would be to actually display both versions and use CSS styling to display the correct version:

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

...then set-up your CSS in the different stylesheets like so:

Style sheet 1 - Left to right format:

.rightLeft {display: none;}

Style sheet 2 - Right to left format:

.leftRight {display: none;}

Upvotes: 0

Roy
Roy

Reputation: 987

A possible solution would be wrapping each digit with a <span> tag. That's pretty safe.

You can probably program a javascript/jQuery function to iterate through <p> tags of a specific class, and wrap each digit inside them with a <span> tag, while giving the right styling for the <sup> digits.

Upvotes: 0

Related Questions