Is it possible to format numbers with CSS? That is: decimal places, decimal separator, thousands separator, etc.
Mir-Ismaili
11.5k5 gold badges69 silver badges94 bronze badges
asked Dec 30, 2011 at 9:01
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
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
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
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: //codepen.io/danielblazquez/pen/qBqVjGy
answered Feb 23, 2021 at 15:43
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
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
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
Code4R7Code4R7
2,3811 gold badge17 silver badges39 bronze badges