how to change negative sign position css

Question

I have a web site that shows its content it two direction. rtl & ltr.

When page is in ltr content mode, every thins is OK and the negative sign shows in the left of number.

body {
    direction: ltr;
}

For example: -1

But when page is in rtl mode,

body {
    direction: rtl;
}

the negative sign of numbers shows in the right of number.

For example: 1-

Whereas I want to show negative sign in the left of number in both cases. How do I do this? Thanks.

Answer 1

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

direction: ltr;
display: inline-block;

Answer 2

Check the code below!

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

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