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:

Answer 1

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.

Answer 2

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.

Answer 3

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.