Css number format

Is it possible to format numbers with CSS? That is: decimal places, decimal separator, thousands separator, etc.

Css number format

Mir-Ismaili

11.5k5 gold badges69 silver badges94 bronze badges

asked Dec 30, 2011 at 9:01

Css number format

6

The CSS working group has publish a Draft on Content Formatting in 2008. But nothing new right now.

answered Jul 10, 2012 at 14:27

YoannYoann

4,8671 gold badge27 silver badges47 bronze badges

Well, for any numbers in Javascript I use next one:

var a = "1222333444555666777888999";
a = a.replace(new RegExp("^(\\d{" + (a.length%3?a.length%3:0) + "})(\\d{3})", "g"), "$1 $2").replace(/(\d{3})+?/gi, "$1 ").trim();

and if you need to use any other separator as comma for example:

var sep = ",";
a = a.replace(/\s/g, sep);

or as a function:

function numberFormat(_number, _sep) {
    _number = typeof _number != "undefined" && _number > 0 ? _number : "";
    _number = _number.replace(new RegExp("^(\\d{" + (_number.length%3? _number.length%3:0) + "})(\\d{3})", "g"), "$1 $2").replace(/(\d{3})+?/gi, "$1 ").trim();
    if(typeof _sep != "undefined" && _sep != " ") {
        _number = _number.replace(/\s/g, _sep);
    }
    return _number;
}

answered Feb 25, 2015 at 0:03

Css number format

4

Probably the best way to do so is combo of setting a span with a class denoting your formatting then use Jquery .each to do formatting on the spans when the DOM is loaded...

answered Aug 6, 2012 at 20:47

RossRoss

1,6251 gold badge17 silver badges22 bronze badges

Not an answer, but perhpas of interest. I did send a proposal to the CSS WG a few years ago. However, nothing has happened. If indeed they (and browser vendors) would see this as a genuine developer concern, perhaps the ball could start rolling?

answered Aug 14, 2012 at 13:58

itpastornitpastorn

2,9171 gold badge21 silver badges24 bronze badges

1

No, you have to use javascript once it's in the DOM or format it via your language server-side (PHP/ruby/python etc.)

answered Dec 30, 2011 at 9:06

Css number format

mreqmreq

6,2944 gold badges34 silver badges56 bronze badges

3

If it helps...

I use the PHP function number_format() and the Narrow No-break Space (). It is often used as an unambiguous thousands separator.

echo number_format(200000, 0, "", " ");

Because IE8 has some problems to render the Narrow No-break Space, I changed it for a SPAN

echo "".number_format(200000, 0, "", "")."";
.number SPAN{
    padding: 0 1px; 
}

answered Jun 26, 2013 at 18:07

Css number format

DanielBlazquezDanielBlazquez

1,0171 gold badge12 silver badges22 bronze badges

1

I don't think you can. You could use number_format() if you're coding in PHP. And other programing languages have a function for formatting numbers too.

answered Dec 30, 2011 at 10:28

Florin FrăticăFlorin Frătică

5774 gold badges7 silver badges13 bronze badges

2

Another solution with pure CSS+HTML and the pseudo-class :lang().

Use some HTML to mark up the number with the classes thousands-separator and decimal-separator:


  Spanish: 1200000.50

Use the lang pseudo-class to format the number.

/* Spanish */
.thousands-separator:lang(es):before{
  content: ".";
}
.decimal-separator:lang(es){
  visibility: hidden;
  position: relative;
}
.decimal-separator:lang(es):before{
  position: absolute;
  visibility: visible;
  content: ",";
}

/* English and Mexican Spanish */
.thousands-separator:lang(en):before, .thousands-separator:lang(es-MX):before{
  content: ",";
}

Codepen: https://codepen.io/danielblazquez/pen/qBqVjGy

answered Feb 23, 2021 at 15:43

Css number format

DanielBlazquezDanielBlazquez

1,0171 gold badge12 silver badges22 bronze badges

You cannot use CSS for this purpose. I recommend using JavaScript if it's applicable. Take a look at this for more information: JavaScript equivalent to printf/string.format

Also As Petr mentioned you can handle it on server-side but it's totally depends on your scenario.

answered Dec 30, 2011 at 9:25

QorbaniQorbani

5,7022 gold badges38 silver badges46 bronze badges

You could use Jstl tag Library for formatting for JSP Pages

JSP Page
//import the jstl lib
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>


Formatted Number (1):

Formatted Number (2):

Formatted Number (3):

Formatted Number (4):

Formatted Number (5):

Formatted Number (6):

Formatted Number (7):

Formatted Number (8):

Result

Formatted Number (1): £120,000.23

Formatted Number (2): 000.231

Formatted Number (3): 120,000.231

Formatted Number (4): 120000.231

Formatted Number (5): 023%

Formatted Number (6): 12,000,023.0900000000%

Formatted Number (7): 023%

Formatted Number (8): 120E3

answered Aug 16, 2016 at 15:20

Css number format

as for thousand separators this is what I found on Wikipedia, in the code of this page


149
597
870
700

answered Jul 29 at 9:17

robotikrobotik

1,7001 gold badge19 silver badges23 bronze badges

2

Another js solution to improve the work of Skeeve:

answered Apr 20 at 8:21

vacsativacsati

4786 silver badges7 bronze badges

The closest thing I could find is the tag, which does do formatting in plain HTML but is also an input field. To make it look like plain text, you could use a bit of CSS.

Unfortunately I don't know how to fix the right margin without JavaScript or using a monospace font and set the width attribute server side.

HTML:

In line

CSS:

p {font-family: verdana;}
input {
  font-family: verdana;
  font-size: 16px;
}
input[readonly] {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 3em;
  font-size: 16px; 
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

answered May 10 at 15:41

Css number format

Code4R7Code4R7

2,3811 gold badge17 silver badges39 bronze badges

Not the answer you're looking for? Browse other questions tagged css number-formatting or ask your own question.

Can you format numbers in CSS?

CSS can format numbers in a variety of ways. By default, CSS displays numbers as they would appear in an HTML document – that is, without any special formatting. However, CSS can be used to format numbers in a variety of ways.

Do decimals work in CSS?

Although you can use decimal places in CSS like 100.0% in reality it best to keep to real numbers for percentages and only upto one decimal place with standard linear integer values. Your 2.9…

How do you change the currency format in HTML?

NumberFormat() Method. One of the best ways in JavaScript to format the number as a currency string is to use Intl. NumberFormat() method. You can pass the locale to the method as a parameter and set the dollar sign before the number and format number.

How do I limit decimal places in HTML?

To recap, you can use the . toFixed() method to limit decimal places.