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

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 2

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.

Answer 3

I found this piece of javascript which might help you out if you are going to do it client-side: http://homepage.mac.com/ruske/ruske/C2127905073/E844527267/Media/FormatInteger.js

Answer 4

No CSS manipulates strings. Sry you'll have to do it with JS

Answer 5

Here is a suggestion that would work, although even I will admit it isn't very nice...

Using the jQuery framework, $("#myElement").text() returns just the text (not any nested html). So you could do this:

<p>$<span id="myElement"><span class="triad">1</span><span class="triad">000</span><span class="triad">000</span></p>

And apply some padding or margin to make it more readable.

When you then call:

$("#myElement").text();

You would get the plain 1000000 back.

CSS:

.triad { padding-left: 5px; }

Answer 6

I wish this was possible with CSS :( you can not get text value and use that in later operations using CSS.

Answer 7

Noway 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 8

How about having the number twice: Once for displaying and once for manipulation like this:

<span class="money" data-value="1000000">$ 1 000 000</span>

Then you can easly use getAttribute('data-value') to get to the value from your JS and format the number any way you want.

data-* attributes are a new feature in HTML 5, but pretty much all current browsers already support it (modulu the .dataset property in the DOM, so you'll have to use getAttribute() in current/older browsers).

Answer 9

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 10

n1313, http://wiki.csswg.org/ideas/content-formatting ;) it's not a solution, just idea

Answer 11

The first thing that comes to mind is using :after and :before with content:" "
Then you just need something that dynamically add a tag around the right numbers and style it.