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

Add unicode-bidi: embed; to your CSS. Should do the trick - updated Fiddle

You can find usage here

Answer 2

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:

<p>א <label id="ProfitShk" class="labelVal">-9 ₪</label> ת
<p>a <label id="ProfitShk" class="labelVal">-9 ₪</label> 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 <bdo> 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 <bdo> 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:

<p>א <label id="ProfitShk" class="labelVal"><bdo dir="ltr">-9</bdo> ₪</label> ת

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.

Answer 3

In addition to Henrik's answer , I would add a LRM control character before the minus sign like so:

<label id="ProfitShk" class="labelVal">&lrm;-9 ₪</label>​​​​​​​​​​​​​​​​​​​​​​

This way the minus sign gets placed before the 9 (which is probably what you want)

This microsoft doc explains the LRM control character along with other control characters.