how to change negative sign position css
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.
html css negative-number
edited Mar 16 '15 at 11:07
Shaan Singh
1,13511230
asked Mar 16 '15 at 10:16
TavousiTavousi
4,707133961
add a comment |
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.
html css negative-number
edited Mar 16 '15 at 11:07
Shaan Singh
1,13511230
asked Mar 16 '15 at 10:16
TavousiTavousi
4,707133961
5
Wrap numbers and change css direction?
– skobaljic
Mar 16 '15 at 10:24
1
as above, a span should do!
– Joe Corby
Mar 16 '15 at 10:26
You can also try to prepend numbers with left-to-right-mark, as answered in this post
– 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
add a comment |
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.
html css negative-number
edited Mar 16 '15 at 11:07
Shaan Singh
1,13511230
asked Mar 16 '15 at 10:16
TavousiTavousi
4,707133961
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.
html css negative-number
html css negative-number
edited Mar 16 '15 at 11:07
Shaan Singh
1,13511230
asked Mar 16 '15 at 10:16
TavousiTavousi
4,707133961
edited Mar 16 '15 at 11:07
Shaan Singh
1,13511230
asked Mar 16 '15 at 10:16
TavousiTavousi
4,707133961
edited Mar 16 '15 at 11:07
Shaan Singh
1,13511230
edited Mar 16 '15 at 11:07
Shaan Singh
1,13511230
edited Mar 16 '15 at 11:07
Shaan Singh
1,13511230
1,13511230
asked Mar 16 '15 at 10:16
TavousiTavousi
4,707133961
asked Mar 16 '15 at 10:16
TavousiTavousi
4,707133961
asked Mar 16 '15 at 10:16
TavousiTavousi
4,707133961
4,707133961
5
Wrap numbers and change css direction?
– skobaljic
Mar 16 '15 at 10:24
1
as above, a span should do!
– Joe Corby
Mar 16 '15 at 10:26
You can also try to prepend numbers with left-to-right-mark, as answered in this post
– 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
add a comment |
5
Wrap numbers and change css direction?
– skobaljic
Mar 16 '15 at 10:24
1
as above, a span should do!
– Joe Corby
Mar 16 '15 at 10:26
You can also try to prepend numbers with left-to-right-mark, as answered in this post
– 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
5
5
Wrap numbers and change css direction?
– skobaljic
Mar 16 '15 at 10:24
Wrap numbers and change css direction?
– skobaljic
Mar 16 '15 at 10:24
1
1
as above, a span should do!
– Joe Corby
Mar 16 '15 at 10:26
as above, a span should do!
– Joe Corby
Mar 16 '15 at 10:26
You can also try to prepend numbers with left-to-right-mark, as answered in this post
– skobaljic
Mar 16 '15 at 10:29
You can also try to prepend numbers with left-to-right-mark, as answered in this post
– 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
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
You did it yourself, you can also answer it and I shall upvote, cheers.
– skobaljic
Mar 16 '15 at 11:21
add a comment |
5 Answers
5
active
oldest
votes
Wrap the number in span and add two following css to it:
direction: ltr;
display: inline-block;
answered Mar 16 '15 at 11:25
TavousiTavousi
4,707133961
1
why ltr is not enough?
– Noam B.
Sep 24 '17 at 12:22
add a comment |
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
avnaveenavnaveen
45938
add a comment |
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/
answered Mar 16 '15 at 10:34
Shaan SinghShaan Singh
1,13511230
add a comment |
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
ketanketan
14.9k123263
add a comment |
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
answered Nov 12 '18 at 11:03
Dagan Bog-ComputersDagan Bog-Computers
3501216
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f29074287%2fhow-to-change-negative-sign-position-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
Wrap the number in span and add two following css to it:
direction: ltr;
display: inline-block;
answered Mar 16 '15 at 11:25
TavousiTavousi
4,707133961
1
why ltr is not enough?
– Noam B.
Sep 24 '17 at 12:22
add a comment |
Wrap the number in span and add two following css to it:
direction: ltr;
display: inline-block;
answered Mar 16 '15 at 11:25
TavousiTavousi
4,707133961
1
why ltr is not enough?
– Noam B.
Sep 24 '17 at 12:22
add a comment |
Wrap the number in span and add two following css to it:
direction: ltr;
display: inline-block;
answered Mar 16 '15 at 11:25
TavousiTavousi
4,707133961
Wrap the number in span and add two following css to it:
direction: ltr;
display: inline-block;
answered Mar 16 '15 at 11:25
TavousiTavousi
4,707133961
answered Mar 16 '15 at 11:25
TavousiTavousi
4,707133961
answered Mar 16 '15 at 11:25
TavousiTavousi
4,707133961
answered Mar 16 '15 at 11:25
TavousiTavousi
4,707133961
4,707133961
1
why ltr is not enough?
– Noam B.
Sep 24 '17 at 12:22
add a comment |
1
why ltr is not enough?
– Noam B.
Sep 24 '17 at 12:22
1
1
why ltr is not enough?
– Noam B.
Sep 24 '17 at 12:22
why ltr is not enough?
– Noam B.
Sep 24 '17 at 12:22
add a comment |
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
avnaveenavnaveen
45938
add a comment |
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
avnaveenavnaveen
45938
add a comment |
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
avnaveenavnaveen
45938
Check the code below!
BODY {
direction: rtl;
}
#test {
direction: ltr;
text-align: right
} Sample Text abc <br />
-1
<p id="test">-1 </p>BODY {
direction: rtl;
}
#test {
direction: ltr;
text-align: right
} Sample Text abc <br />
-1
<p id="test">-1 </p>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
avnaveenavnaveen
45938
answered Mar 16 '15 at 11:06
avnaveenavnaveen
45938
answered Mar 16 '15 at 11:06
avnaveenavnaveen
45938
answered Mar 16 '15 at 11:06
avnaveenavnaveen
45938
45938
add a comment |
add a comment |
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/
answered Mar 16 '15 at 10:34
Shaan SinghShaan Singh
1,13511230
add a comment |
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/
answered Mar 16 '15 at 10:34
Shaan SinghShaan Singh
1,13511230
add a comment |
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/
answered Mar 16 '15 at 10:34
Shaan SinghShaan Singh
1,13511230
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/
answered Mar 16 '15 at 10:34
Shaan SinghShaan Singh
1,13511230
edited Mar 16 '15 at 13:11
answered Mar 16 '15 at 10:34
Shaan SinghShaan Singh
1,13511230
answered Mar 16 '15 at 10:34
Shaan SinghShaan Singh
1,13511230
answered Mar 16 '15 at 10:34
Shaan SinghShaan Singh
1,13511230
1,13511230
add a comment |
add a comment |
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
ketanketan
14.9k123263
add a comment |
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
ketanketan
14.9k123263
add a comment |
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
ketanketan
14.9k123263
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
ketanketan
14.9k123263
answered Mar 16 '15 at 10:42
ketanketan
14.9k123263
answered Mar 16 '15 at 10:42
ketanketan
14.9k123263
answered Mar 16 '15 at 10:42
ketanketan
14.9k123263
14.9k123263
add a comment |
add a comment |
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
answered Nov 12 '18 at 11:03
Dagan Bog-ComputersDagan Bog-Computers
3501216
add a comment |
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
answered Nov 12 '18 at 11:03
Dagan Bog-ComputersDagan Bog-Computers
3501216
add a comment |
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
answered Nov 12 '18 at 11:03
Dagan Bog-ComputersDagan Bog-Computers
3501216
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
answered Nov 12 '18 at 11:03
Dagan Bog-ComputersDagan Bog-Computers
3501216
answered Nov 12 '18 at 11:03
Dagan Bog-ComputersDagan Bog-Computers
3501216
answered Nov 12 '18 at 11:03
Dagan Bog-ComputersDagan Bog-Computers
3501216
answered Nov 12 '18 at 11:03
Dagan Bog-ComputersDagan Bog-Computers
3501216
3501216
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f29074287%2fhow-to-change-negative-sign-position-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
5
Wrap numbers and change css direction?
– skobaljic
Mar 16 '15 at 10:24
1
as above, a span should do!
– Joe Corby
Mar 16 '15 at 10:26
You can also try to prepend numbers with left-to-right-mark, as answered in this post
– 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