How to change negative position of css sign

Question

I have a website that shows its content in two ways. rtl and ltr.

When the page is in ltr content mode, each ton is fine and a negative sign is displayed to the left of the number.

body { direction: ltr; } 

For example: -1

But when the page is in rtl mode,

 body { direction: rtl; } 

the negative sign of the number is shown to the right of the number.

For example: 1 -

While I want to show a negative sign to the left of the number in both cases. How can I do it? Thanks.

Answer 1

Wrap the number in the field and add the following two css to it:

 direction: ltr; display: inline-block; 

Answer 2

Check out the code below!

 BODY { direction: rtl; } #test { direction: ltr; text-align: right } 

  Sample Text abc <br /> -1 <p id="test">-1 </p> 

Answer 3

Wrapping numbers in the span and changing direction did not have any effect, as shown in this script: https://jsfiddle.net/shaansingh/kLpa8ygv/ .

However, the OP found that by adding inline-block and recording in-flight, the solution worked. Just adding it to this answer so that it can be as resourceful as possible. Please check OP comments and answers for full details.

 direction: ltr; display: inline-block; 

You can always resort to a little JavaScript to fix this problem. Use this script to determine if the body is rtl and is modified accordingly (assuming ltr is the default value in HTML):

 var element = document.body, style = window.getComputedStyle(element), direction = style.getPropertyValue('direction'); if (direction == "rtl") { document.getElementById("neg").innerHTML = "1-"; } 

The full code is in this script: https://jsfiddle.net/shaansingh/axpevvon/4/

Answer 4

You can specify a number in the range and indicate the direction of this direction to ltr, for example:

 <span class="nagativeVal">-1</span> 

CSS

 .nagativeVal { direction: ltr; } 

Hope this helps.