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.

You can also try to prepend numbers with [left-to-right-mark](http://www.fileformat.info/info/unicode/char/200e/index.htm), as answered [in this post](http://stackoverflow.com/questions/8227183/rtl-is-on-web-page-reverses-numbers-with-a-dash#19930251) — skobaljic, Mar 16 '15 at 10:29
That's right @skobaljic. It worked with adding span and then, change direction and FINALLY change display to inline-block. pls, answer this question til I marked as answer. Thanks. — Tavousi, Mar 16 '15 at 10:57
You did it yourself, you can also answer it and I shall upvote, cheers. — skobaljic, Mar 16 '15 at 11:21

score 10 · Accepted Answer · answered Mar 16 '15 at 11:25

10

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

direction: ltr;
display: inline-block;

answered Mar 16 '15 at 11:25

Tavousi

14,848
18
51
70

1

why ltr is not enough? – Noam B. Sep 24 '17 at 12:22

score 3 · Answer 2 · answered Mar 16 '15 at 11:06

3

Check the code below!

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

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

answered Mar 16 '15 at 11:06

avnaveen

562
2
4
10

score 1 · Answer 3 · 2015-03-16T13:11:00.710

Wrapping the numbers in a span and changing the direction didn't seem to have any effect, as shown in this fiddle: https://jsfiddle.net/shaansingh/kLpa8ygv/.

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

direction: ltr;
display: inline-block;

You could always resort to a little JavaScript to fix the problem. Use this script to detect whether body is rtl and change accordingly (assuming ltr is the default in the 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 fiddle: https://jsfiddle.net/shaansingh/axpevvon/4/

score 1 · Answer 4 · answered Nov 12 '18 at 11:03

we also support both direction in our website and with a lot of numbers. I have found this to be cleaner because there are cases we do not want to change: display: inline-block; property

solution:

div {
    direction: ltr;
    unicode-bidi: bidi-override;
}

https://www.w3schools.com/cssref/pr_text_unicode-bidi.asp for more about properties and options

score 1 · Answer 5 · answered Jun 29 '20 at 16:31

1

This can be used

body {
  direction: rtl;
  unicode-bidi: plaintext;
}

Refer this mdn link

answered Jun 29 '20 at 16:31

Gurudev

33
1
1
6

score 0 · Answer 6 · answered Mar 16 '15 at 10:42

0

You can give number in span and give that span direction to ltr like:

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

css:

.nagativeVal
{
  direction: ltr;
}

Hope it helps.

answered Mar 16 '15 at 10:42

ketan

19,129
42
60
98

how to change negative sign position css

6 Answers6