Martin AJ Martin AJ - 3 months ago 9
CSS Question

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

Here is my HTML structure:



div{
direction: rtl;
}

span{
direction: ltr;
}

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





This is expected result:

enter image description here

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:

enter image description here

Answer

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.

Comments