Formatting numbers decimal places thousands separators etc with CSS

Question

Is it possible to format numbers with CSS  That is  decimal places  decimal separator  thousands separator  etc

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

If it helps     I use the PHP function number format   and the Narrow No-break Space   amp  8239    It is often used as an unambiguous thousands separator   echo number format 200000  0        amp  8239       Because IE8 has some problems to render the Narrow No-break Space  I changed it for a SPAN  echo   lt span class  number  gt   number format 200000  0        lt span gt  lt  span gt      lt  span gt       number SPAN      padding  0 1px

User · Answer

Unfortunately  it s not possible with CSS currently  but you can use Number prototype toLocaleString    It can also format for other number formats  e g  latin  arabic  etc  https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Number toLocaleString

User · Answer

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

User · Answer

You could use Jstl tag Library for formatting for JSP Pages   JSP Page   import the jstl lib  lt    taglib uri  http   java sun com jstl fmt  prefix  fmt    gt    lt c set var  balance  value  120000 2309    gt   lt p gt Formatted Number  1    lt fmt formatNumber value    balance            type  currency   gt  lt  p gt   lt p gt Formatted Number  2    lt fmt formatNumber type  number           maxIntegerDigits  3  value    balance     gt  lt  p gt   lt p gt Formatted Number  3    lt fmt formatNumber type  number           maxFractionDigits  3  value    balance     gt  lt  p gt   lt p gt Formatted Number  4    lt fmt formatNumber type  number           groupingUsed  false  value    balance     gt  lt  p gt   lt p gt Formatted Number  5    lt fmt formatNumber type  percent           maxIntegerDigits  3  value    balance     gt  lt  p gt   lt p gt Formatted Number  6    lt fmt formatNumber type  percent           minFractionDigits  10  value    balance     gt  lt  p gt   lt p gt Formatted Number  7    lt fmt formatNumber type  percent           maxIntegerDigits  3  value    balance     gt  lt  p gt   lt p gt Formatted Number  8    lt fmt formatNumber type  number           pattern         E0  value    balance     gt  lt  p gt    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

User · Answer

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

User · Answer

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   lt html lang  quot es quot  gt    Spanish  1 lt span class  quot thousands-separator quot  gt 200 lt  span gt  lt span class  quot thousands-separator quot  gt 000 lt  span gt  lt span class  quot decimal-separator quot  gt   lt  span gt 50  lt  html gt   Use the lang pseudo-class to format the number     Spanish     thousands-separator lang es  before    content   quot   quot      decimal-separator lang es     visibility  hidden    position  relative     decimal-separator lang es  before    position  absolute    visibility  visible    content   quot   quot         English and Mexican Spanish     thousands-separator lang en  before   thousands-separator lang es-MX  before    content   quot   quot      Codepen  https   codepen io danielblazquez pen qBqVjGy

User · Answer

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

User · Answer

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   amp  amp   number  gt  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   amp  amp   sep                    number    number replace   s g   sep             return  number

[css] Formatting numbers (decimal places, thousands separators, etc) with CSS

Examples related to css

Examples related to number-formatting