Formatting a number as currency using CSS

Question

Just wondering if anyone knows whether it is possible to format the content of an element as currency using only CSS. It would be nice to have how the value is presented in

Answer 1

The currency format can be achieved with CSS and a bit of Javascript which is needed for the parsing of the number to add the commas. A CSS class adds the additional styling like negative (red) or currency sign (i.e. $ Dollar sign). The approach is a follows:

1) Convert the value to number (adds the commas based on the locale)

Number(value).toLocaleString('en');

2) Add a class to determine if it is negative or positive value (i.e. red color)

.enMoney::before {
    content:"$";
}
.negMoney {
    color:red;
}

See more detail here with the sample code and css:

http://www.ozkary.com/2014/04/format-currency-with-javascript-and-css.html

Answer 2

Well, this doesn't fit your own use case unfortunately, and it's fairly obvious, but you could do this for integer numbers from -999 to 999.

.currency:before{ content:'$'; }
.currency:after{ content: '.00'; }

<span class="currency">789</span>

Then, a possible, annoying, solution if you're working server side, is to convert your number to a reversed string and loop over each character. If you really wanted you could place the characters into li's and css could then do the formatting you wanted as follows. However this is incredibly pointless as you may as well simply author the string at that point.

.currency li:before{ content: ' ,';}
.currency li:first-child:before{ content:'$' !important; }
.currency *{ display: inline-block; }
.currency, .currency > *{ display: inline-block; }
.currency:after{ content: '.00'; }

<ul class="currency"><li>123</li><li>456</li><li>789</li></ul> 
<ul class="currency"><li>456</li><li>789</li></ul> 
<ul class="currency"><li>789</li></ul> 

For an even deeper dive into pointless effort, you could prepend a

<style> .currency:after{ content: '.00'; } </style>

above the <ul>, allowing your script to change the decimal value in CSS, lol

Still, if you were to cave and use JavaScript, then the CSS may actually be somewhat useful. You can output a plain int or double (any precision) and just have JS break it into <li>s.

Answer 3

If you're asking about number formatting in CSS (that is, parsing a number from a string and then formatting it with thousands separator, decimal separator, fixed decimal digits number etc), then no, it is impossible in CSS, and this is not what CSS was designed for.

If you want to do any formatting, then you'd better to use XSLT. For example:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="span[@class='dollars']">
        <span>
            <xsl:text>$</xsl:text>
            <xsl:value-of select="format-number(current(), '###,###.00')"/>
        </span>
    </xsl:template>

    <xsl:template match="@* | node()">
        <xsl:copy>
            <xsl:apply-templates select="@* | node()"/>
        </xsl:copy>
    </xsl:template>
</xsl:stylesheet>

Answer 4

var number = 25153.3; console.log(number.toLocaleString()); /------

var number = 25153.3;
result="$ " + number.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})
console.log(result);

console.log();
//---------------------------------------------------

// request a currency format
console.log(number.toLocaleString('us-US', { style: 'currency', currency: 'USD' }));
// → $ 251,52.30 

console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
// → 25.152,30 €

// the Japanese yen doesn't use a minor unit
console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
// → ￥251,53