RTL is on web page reverses numbers with a dash

Question

When my website displays Hebrew text mixed with numbers, and there is a number with a dash in the middle, the number with the dash in the middle is displayed RTL. For example, with the text: רמה 4–0, it should display 4-0 instead of 0-4, since it is a numeral sequence, and the '4' precedes the '0'. However, on the browsers I checked, it displays the '0' before the '4'.

Since this could occur any place in the system data is displayed, it would be much preferable to have a CSS solution that does not require something like:

<span style="direction:ltr">4-0</span>

The general direction for text should remain RTL, but numbers with dashes should be displayed LTR. Should display properly on the major browsers (IE, Firefox, Chrome).

Answer 1

You can embed the left-to-right and right-to-left marker characters (‎ and ‏ respectively) before and after the numeric sequences - this does not need any extra markup, no delimiters and will preserve the text order in the source document.

An alternative is to have some markup to delimit the numbers with dashes (similar to what you have done), as the Unicode BIDI algorithm just doesn't handle this specific scenario very well without help (lrm and rlm).

There is no need for the CSS to be inline as you have done, but you will still need something like:

CSS:

.numdash
{
  direction: ltr;
}

HTML:

<span class="numdash">4-0</span>

A third option is that of reversing the numbers and simply using 0-4 in the markup and have that reversed by the bidi algorithm.