Change direction of negative number with combination of LTR and RTL content

Question

Here is my HTML structure:

div{
  direction: rtl;
}

span{
  direction: ltr;
}

<div>
  <span>امروز -2</span>
  </div>

This is expected result:

As you see, - sign should come in the beginning of the number. How can I do that?

Note: The direction of div should be rtl.

ٍEDIT: I generate that number like this:

$sums_value = sprintf("%+d",$sums_value);

/* 
sums_value = -2 //=> -2
sums_value = 2  //=> +2

So the number has right format, but I don't know why it will be broken in the output:

It's probably treating `-2` as one item, so it's not reversing it. Just write the number normally in the markup. — Carcigenicate, Aug 12 '16 at 16:08
I know this is probably painfully obvious, but is there no reason you can simply write it in the ltr format? (Is it dynamic content?) — DBS, Aug 12 '16 at 16:16
@Carcigenicate The number is written normally in the markup. As you see it is `-5` in the inspect element box. But I don't know why it will be reverse in the website like `5-` ... — Martin AJ, Aug 12 '16 at 16:27

Dekel · Accepted Answer · 2016-08-12T16:47:06.093

13

Since your screenshot has the "-2" in a different span element you could is the unicode-bidi option on that specific span:

div{
  direction: rtl;
}

span{
  direction: ltr;
  unicode-bidi: bidi-override;
}

<div>
  امروز 
  <span>-2</span>
</div>

The general idea of unicode-bidi is to have the ability to change the default behavior of directionality of the text where you have multiple languages on the same page.

Since you are using an RTL language, and you want the -2 to appear in LTR, the unicode-bidi: bidi-override is very handy.

edited Aug 12 '16 at 16:47

answered Aug 12 '16 at 16:37

Dekel

60,707
10
101
129

Excellent .. upvote ... You know, I never seen `unicode-bidi` so far .. well played ..! – Martin AJ Aug 12 '16 at 16:41

score 8 · Answer 2 · answered Sep 25 '18 at 18:23

8

The following worked for me:

span {
  unicode-bidi: plaintext;
}

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi

By the way, 'bidi' is short for bidirectional.

answered Sep 25 '18 at 18:23

Marcus

3,459
1
26
25

@A.J. good point about it not working in Safari; I hadn't noticed that. – Marcus Jul 06 '19 at 15:53

score 3 · Answer 3 · answered Aug 12 '16 at 16:08

3

You can use the before pseudo element to add a hyphen.

q::before { 
  content: "-";
  color: blue;
}


<q>Some quotes</q>, he said.

Will render as

-Some quotes, he said.

answered Aug 12 '16 at 16:08

randominstanceOfLivingThing

16,873
13
49
72

Change direction of negative number with combination of LTR and RTL content

3 Answers3

Linked

Related