CODEWITHSUNDEEP
csshebrewright-to-left
Yirmiyahu Fischer
Yirmiyahu Fischer

Reputation: 623

RTL is on web page reverses numbers with a dash

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

Upvotes: 31

Views: 15830

Answers (8)

SimPHP
SimPHP

Reputation: 65

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

Upvotes: 3

Vinicius Fortuna
Vinicius Fortuna

Reputation: 572

This is how the BIDI algorithm is processing your text: enter image description here

(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:

enter image description here

Upvotes: 3

Bassem Shahin
Bassem Shahin

Reputation: 706

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>

Upvotes: 6

A.Alinia
A.Alinia

Reputation: 624

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)

Upvotes: 13

jerclarke
jerclarke

Reputation: 1479

The answer mentioning &lrm; and &rlm; 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 &lrm;/&rlm; 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 &rlm; 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.

Upvotes: 1

Carlos Martinez T
Carlos Martinez T

Reputation: 6528

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

<span>&#x200E;+44 780-780-7807</span>

Upvotes: 27

Oded
Oded

Reputation: 498914

You can embed the left-to-right and right-to-left marker characters (&lrm; and &rlm; 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.

Upvotes: 17

Tomer Cohen
Tomer Cohen

Reputation: 374

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

Upvotes: 0

Related Questions