Formatting numbers (decimal places, thousands separators, etc.) Using CSS

Question

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

Answer 1

Well, for any numbers in Javascript, I use the following:

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 a 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; } 

Answer 2

The CSS working group published a project in Content Formatting in 2008. But nothing new right now.

Answer 3

Probably the best way to do this is to combo to set a range with a class denoting your formatting, and then use JQuery.each to format on spans when loading the DOM ...

Answer 4

No, you should use javascript as soon as it is in the DOM, or format it using the server side of the server (PHP / ruby ​​/ python, etc.)

Answer 5

Not an answer, but an interest. A few years ago I sent an offer

Answer 6

If this helps ...

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

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

Since IE8 has some problems displaying narrow space without breaking, I changed it for SPAN

 echo "<span class='number'>".number_format(200000, 0, "", "<span></span>")."</span>"; 

 .number SPAN{ padding: 0 1px; } 

Answer 7

You cannot use CSS for this purpose. I recommend using JavaScript, if applicable. Take a look at this for more info: JavaScript equivalent of printf / string.format

Also, as Peter said, you can handle this on the server side, but it depends entirely on your scenario.

Answer 8

I do not think you can. You can use number_format () if you are coding in PHP. And other programming languages ​​also have a number formatting function.

Answer 9

You can use the Jstl tag library to format for JSP pages

 JSP Page //import the jstl lib <%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %> <c:set var="balance" value="120000.2309" /> <p>Formatted Number (1): <fmt:formatNumber value="${balance}" type="currency"/></p> <p>Formatted Number (2): <fmt:formatNumber type="number" maxIntegerDigits="3" value="${balance}" /></p> <p>Formatted Number (3): <fmt:formatNumber type="number" maxFractionDigits="3" value="${balance}" /></p> <p>Formatted Number (4): <fmt:formatNumber type="number" groupingUsed="false" value="${balance}" /></p> <p>Formatted Number (5): <fmt:formatNumber type="percent" maxIntegerDigits="3" value="${balance}" /></p> <p>Formatted Number (6): <fmt:formatNumber type="percent" minFractionDigits="10" value="${balance}" /></p> <p>Formatted Number (7): <fmt:formatNumber type="percent" maxIntegerDigits="3" value="${balance}" /></p> <p>Formatted Number (8): <fmt:formatNumber type="number" pattern="###.###E0" value="${balance}" /></p> 

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,09,000,000,000%

Formatted Number (7): 023%

Formatted Number (8): 120E3