CODEWITHSUNDEEP
javascriptcss
n1313
n1313

Reputation: 21421

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

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.

Upvotes: 36

Views: 3037

Answers (12)

bas080
bas080

Reputation: 479

function largeNumberToReadableNumber(number){
  var str = Math.floor(amount)+""; //make the integer a string
  var sub = str.substring(str.length-3, str.length); //the last three characters
  newstr = " "+sub;
  var i = 1;
  while (sub.length >= 3){
    sub = str.substring(str.length-((i+1)*3),str.length-(i*3)); //next three characters
    newstr = sub + " " + newstr; //append the characters
    i+=1;
  }
  return newstr;
}

largeNumberToReadable(120312381124124); //will output " 120 312 381 124  124"

I am sure this can be written better and shorter but it does the job.

Upvotes: 1

Skay
Skay

Reputation: 9493

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, '.', ' ')

Upvotes: 15

Knu
Knu

Reputation: 15134

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.

Upvotes: 0

Skay
Skay

Reputation: 9493

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

Upvotes: 1

n1313
n1313

Reputation: 21421

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 :)

Upvotes: 6

Sarfraz
Sarfraz

Reputation: 382841

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

Upvotes: 0

Joachim Sauer
Joachim Sauer

Reputation: 308209

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).

Upvotes: 0

Fenton
Fenton

Reputation: 251172

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; }

Upvotes: 1

fmsf
fmsf

Reputation: 37177

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

Upvotes: 0

James B
James B

Reputation: 3750

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

Upvotes: 0

Andreas Grech
Andreas Grech

Reputation: 108000

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.

Upvotes: 2

Skilldrick
Skilldrick

Reputation: 70869

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.

Upvotes: 2

Related Questions