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

回答1:

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.

回答2:

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

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

回答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)

回答4:

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.

回答5:

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>

回答6:

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

来源：https://stackoverflow.com/questions/8227183/rtl-is-on-web-page-reverses-numbers-with-a-dash

标签

css

hebrew

right-to-left