Is there a way to break long numbers ("$100000000") into more readable triads ("$100 000 000") with CSS?

Question

I have a page with lots of big number values. Millions and billions of dollars going everywhere. And it is hard to read these numbers, so my client asks me to break them into more readable chunks of three symbols, "$100000000" => "$100 000 000".

This is completely reasonable request, but the problem is that I do not want to do this on server-side, and I do not want to do this with javascript. You see, I have a really big heap of javascript already running on this page, doing complex computations on these long numbers, and it will be really difficult to insert a parseReadableStringToInteger() in every place that reads data from page and a writeIntegerAsReadableString() in every place that writes results back to page.

So, I am thinking of using CSS to make long string display as a set of short chunks. My first thought was of -moz-column and -webkit-column, but unfortunately, they work only with words that are already separated by space.

Maybe there is another way? Any suggestions are welcome.

p.s. Cross-browser compatibility is not required. I'm ok with Gecko and/or Webkit.

Answer 1

There is no way to do it via CSS, but you can extend Number type like this:

    Number.prototype.formatMoney = function(c, d, t){
    var n = this, c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "," : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
       return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
    };

then use it like this:

var count = 10000000;
count.formatMoney(2, '.', ' ')

Answer 2

Damn it, I'm almost there!!

span {
    display: block;
    -moz-column-gap:5px;
    -moz-column-width:24px;
    word-wrap:break-word;
}

<span>100000</span>
<span>1000000</span>
<span>10000000</span>
<span>100000000</span>

gives me

100 000
100 000 0
100 000 00
100 000 000

The only thing that is left is somehow start the splitting from the right. Now experimenting with direction: rtl and such :)

Answer 3

You're going to have to find a JavaScript way to do this, I'm pretty certain. Any CSS technique, even if it were possible, wouldn't be cross-browser.

Answer 4

If you aren't willing to use JavaScript to change the formatting, you should change their format from the server...ie, before rendering the page.