Can you format numbers in css?

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

Can you format numbers in css?

Mir-Ismaili

11.6k5 gold badges69 silver badges94 bronze badges

asked Dec 30, 2011 at 9:01

Can you format numbers in css?

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,8771 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

Can you format numbers in css?

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

Can you format numbers in css?

mreqmreq

6,3044 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

Can you format numbers in css?

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

Can you format numbers in css?

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

Can you format numbers in css?

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,7101 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

Can you format numbers in css?

Code4R7Code4R7

2,3871 gold badge17 silver badges39 bronze badges

Can you format numbers with CSS?

Given a number and the task is to format the number of an HTML element as currency using CSS and a little bit of JavaScript. It is not possible to complete the task with pure CSS.

Can you use decimals 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… probably would be read as 3. Furthermore you have to remember many elements use padding, margins and borders.

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 add a comma to a number in HTML?

The toLocaleString method lets us format a number to a string with commas as thousands of separators automatically. You can do HTML input number format comma with it. Or using autoNumeric plugin you can make a field as numeric input with different separators.