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).

Alejandraalejandrina

Put your content in a <bdi></bdi> tag. – Garb

Answer 1

There is another way to do this by appending ‎ before the numbers:

<span>&#x200E;[phone]</span>

Jodeejodhpur

Answer 2

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.

Reynolds

didn't fix the problem, just aligns the text to the left! – Slinky

Answer 3

For me, following style works perfectly:

* {
    unicode-bidi: embed;
}

you can check this example at CodePen (I don't know Hebrew so, I've copied some texts from here)

Dawna

Answer 4

use this class:

.number_ltr {
    direction: ltr!important;
    unicode-bidi: embed;
}

so your HTML code should looks like:

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

Stelliform

Answer 5

This is how the BIDI algorithm is processing your text:

(From https://util.unicode.org/UnicodeJsps/bidi.jsp?a=%D7%A8%D7%9E%D7%94+4%E2%80%930&p=RTL)

You have four runs: 'HEBREW ', '4', '-', '0', which get ordered RTL: '0', '-', '4', 'HEBREW '.

If you want '4-0' to be treated as one run, surround it with tags:

<div dir="rtl">רמה <bdi>4–0</bdi></div>

This will give you the runs 'HEBREW ', '4-0', which will render RTL like 4-0 רמה.

However, the easiest is to use use a hyphen (-), instead of the en dash you are using (–). The hyphen will give you the correct runs:

Alcoholism

Answer 6

Put your content in a <bdi></bdi> tag. – This worked wonders!

Vibrator

Answer 7

The answer mentioning ‎ and ‏ is correct. Inserting those invisible markers before or after a symbol with "weak" direction (punctuation or numbers, which don't have "strong" direction like latin letters or Arabic/Hebrew letters) will ensure that the weak character inherits the desired direction.

The "BiDi"/Bi-Directional Text wikipedia article has a great description of the issue and how Unicode interpreters are supposed to handle mixed direction text. It helped me understand the issue a lot:

http://en.wikipedia.org/wiki/Bi-directional_text

My personal solution is to avoid using ‎/‏ symbols because I am building a site that needs to work in both directions, and inserting content will make a huge mess. Instead they can be automatically inserted using the CSS "before" and "after" properties. Here's an example, using the "\200F" unicode designation for the RLM marker:

#RIGHT-TO-LEFT-MARKER-CONTENT,
.contributor:after,
/*.contributor:before,*/
.right-to-left-marker-content {
    /*Inserts ‏ marker to ensure
    the contained content is always 
    displayed RTL*/
    content: "\200F";
}

(Note the CSS is in "DRY CSS" format that allows you to add selectors as needed to avoid re-stating the actual style declaration over and over. The important part is just that you have content: "\200F" and that you add :before or :after to the selector as necessary.

Troytroyer

Answer 8

DO NOT consider reversing the sequence, please, as it will also make the result reversed if the user will try to copy&paste it to another application. Instead, you might be interested in non-css solutions:

LRM/RLM‍

‍

LRE/RLE…PDF

Fetter

Can you explain the relevance of PDF here? – Reynolds

@Oded: PDF stands for Pop Direction Formatting. When you use RLE/LRE/RLO/LRO you declare a start of a directional block, and PDF character declare its end. For more information: unicode.org/reports/tr9/#Terminating_Explicit_Directional_Code – Fetter

Thanks for the info - I didn't understand what the Portable Document Format had to do with it ;) – Reynolds