how to change negative sign position css


Tags: html,css,negative-number

Problem :

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.



Solution :

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

direction: ltr;
display: inline-block;

    CSS Howto..

    CSS exit box how to? [closed]

    How to change the background-color of jumbrotron?

    How to override\edit Zurb Foundation base CSS styles?

    How can I print a full gridview area via a custom print window?

    How to link a HTML page to a CSS file when the CSS file is in an upper directory?

    How do I spread out this navbar along with making the links exclusive to the button itself?

    How to make a text with skewed line but not letters?

    CSS how to get a div to the right side and a div exactly in the middle?

    How to target div within a modal box with CSS

    How do I increase the size of the text contained?

    How to set height and width of video element in percent

    How do I use this CSS animation in my HTML file?

    CSS Flexbox: How do you align child elements of a flexbox container to opposite far ends of the main axis?

    how to set overflow: hidden; to one element

    How to prevent mobile keyboard from rising footer over the text fields?

    How to make HTML pages print at a consistent size from Chrome?

    html/css, how to make element padding not cover over previous elements?

    how to make drag and drop jquery?

    ASP.NET - How to include CSS only if it isn't alrealy included?

    My dropdown menu isn't showing below parent

    how to add JS and CSS tags from module without using header hook

    How to override background of Bootstrap Material Design theme?

    How do I format tabs in Blueprint CSS?

    How do I absolute position a div from left to the right using media queries?

    How to Resize Unicode Characters via CSS

    How to dynamically generate droppable/draggable/sortable div elements within a div?

    how to disable width: 100%; and box-sizing: border-box;

    How to solve the disapearing of top margins in element when using CSS3 Pie in IE7

    How to add css library to project generated with angular-cli@webpack

    How to properly apply a css hack for IE11 transition misbehaviour