Direction ltr in a rtl HTML page

Question

I am trying to display a negative number in a rtl HTML page.

The label doesn\'t seem to respond to my direction: ltr

I have written a jsFiddle to di

Answer 1

The reason why direction: ltr does not put the minus sign on the left of a number is that the surrounding characters are right-to-left characters, making “neutral” characters like digits and minus (or hyphen) take that directionality. The direction property affects the layout direction of boxes and related issues, not the writing direction of text.

Consider the following:

א -9 ₪ ת
a -9 ₪ b

In the first case, the hyphen appears on the right of the digit 9, following the writing direction of the surrounding text. In the second case, the order is opposite, because the surrounding characters are Latin letters, which have inherent left-to-right directionality.

This is a tricky issue, and some pages in Hebrew seem to use the trick of putting the hyphen after the number in HTML source, so that when right to left writing is applied, the hyphen appears on the left of the number.

More proper approaches are:

1. Use unicode-bidi: bidi-override in CSS, together with direction. It means that inherent directionality is ignored within the content and the order specified by direction is applied.
2. Use unicode-bidi: embed in CSS, together with direction. This creates a “directionality island” within which the surrounding text does not affect directionality. When the element content contains only “neutral” characters then, the direction property sets the text direction.
3. Use element in HTML, with the dir attribute. This is the HTML counterpart of method 2, and better in the sense that this is not about stylistic presentational suggestions (which is what CSS is for and does best) but about getting things right, dealing with some basic problems in directionality.
4. Use the left-to-right and right-to-left mark before and after the string. They can be represented in HTML as ‎ and ‏, respectively. This makes the last character before the string a left-to-right mark, causing it to be displayed left-to-right, if it contains only “neutral” characters.

This was a simplified presentation of a complex issue. Anyway, using is probably the best approach. In all approaches, the setting of directionality should be restricted to the smallest possible string, such as -9 in the example:

א -9 ₪ ת

The character used as minus sign should really be the Unicode minus “−” U+2212 MINUS SIGN, representable in HTML as −, but this does not affect the directionality issue.