CODEWITHSUNDEEP
htmlcssbidi
Martin AJ
Martin AJ

Reputation: 6707

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

Upvotes: 9

Views: 2974

Answers (3)

Marcus
Marcus

Reputation: 3797

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.

Upvotes: 9

Dekel
Dekel

Reputation: 62676

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.

Upvotes: 14

randominstanceOfLivingThing
randominstanceOfLivingThing

Reputation: 18792

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.

Upvotes: 3

Related Questions