« Firefox 2.0 final (really)
Not a new design »

Numbers (markup or style)

I had a discussion with a friend about styling numbers. Take for example the number 2000000. It is kind of hard to read as there is no spacing or dots between the numbers. So instead the number would be styled as 2.000.000 (with dots) or 2 000 000 (by spaces). The question is how to make this semantic correct? We both agreed that this is more of a styling issue than markup. But is there any way to make this in CSS?

The only way we thought this could be accomplished was to add span elements, ex.

2<span style="margin: 0 10px">000</span>000

But this solution is not really elegant. Should the server or application add spans when find long numbers? Instead the server or application could add hard spaces but then it is markup and not styling. To add dots is only possible by the server as I can see it, or can the :after pseudo element be used?

Do you have a good solution for this?

Related Posts:

External links

This entry was posted on Thursday, October 26th, 2006 at 4:16 pm and are tagged with: , . You can follow any responses to this entry through the RSS 2.0 feed. Listen to this post Digg this post at del.icio.us, Technorati, Digg, Slashdot. You can leave a response, or trackback from your own site.

19 Responses to “Numbers (markup or style)”

  1. G.Lindqvist Says:
    October 26th, 2006 at 8:22 pm

    You could use Javascript for the task.

  2. Jens Wedin Says:
    October 26th, 2006 at 9:01 pm

    Interesting, but would you insert a span like my example or would you do it differently?

  3. G.Lindqvist Says:
    October 27th, 2006 at 1:05 am

    You could use span with a id and then collect all numbers with numbers = document.getElementById("numbers");

    And then use style elements to create your margins. Another solutions could be » « and that shouldn’t effect the semantic.

  4. Chris Says:
    October 27th, 2006 at 9:14 am

    I would use a Javascript. It would be correct to use CSS, since it’s a presentational issue, but one cannot accomplish this without tons of span-elements which would bloat your document.

  5. Jens Says:
    October 27th, 2006 at 10:19 am

    Thanks Chris for your comment, it interesting to hear that both you and G.Lindqvist have the same idea. Too bad that there isn’t any property for this in CSS though, can we hope for this in CSS 3?

  6. knuff Says:
    October 29th, 2006 at 2:12 pm

    Javascript. 1. Parse the text. (get all p-tags or something like that) 2. Look for words that can be numbers. (I dont know any function, but it shouldnt be too hard to check if a string is numeric) 3. Count the length of the number, insert desrie char after 3 numbers.

    That way you wont need to add span-elements, and the space or the dot you have inseterd wont be displayed in the source. However I dont thinks this is the right way but its doable.

    Cheers!

  7. Jens Says:
    October 29th, 2006 at 2:38 pm

    knuff: Thanks for the comment. You say that you don´t think this would be the correct way. Why do you think that?

  8. knuff Says:
    October 29th, 2006 at 3:05 pm

    Well perhaps I used the wrong word, its more like its not optimal (having evolution in mind such as next gen CSS and so on.) One drawback is that it could be hard to limit the selection. It easy to get all p-elements and parse them, but what if there has to be some exceptions. Then you have to tag p-elements so you can identify cases of exceptions. Doable but not optimal : )

    Keep up the good work.

    Cheers!

  9. Jens Says:
    October 29th, 2006 at 3:17 pm

    Thanks for the quick reply :)

  10. G.Lindqvist Says:
    October 30th, 2006 at 10:57 am

    This can be a start for the function in Javascript. [code] window.onload = function() { var para = document.getElementById(”numbers”); para.style.marginLeft = “2%”; // Sets the left margin of the element } [/code]

  11. Jens Says:
    October 30th, 2006 at 11:47 am

    Thanks G! If you have an working example I would love to try it out. I suck big time when it comes to JS so if you have an working example I would love to check it out.

  12. knuff Says:
    October 31st, 2006 at 1:47 am

    I should really sleep right now, pardon my bad english and grammar this late our. Id attribute should be unique so name is more correct way if you ask me. 2000 (js: document.getElementsByName). Setting the margin-left wont do the trick, its only afftecting the whole number. What you want to do is inserting a space or dot every third number in the number. Below you have a working example of what you would like to do. However I would work out some way to get rid of the span-elements if I had more time. Hopes this helps you. BTW the functioncall should be place in body-element onload. Dont forget to check the source after hitting the bottom. One last thing, IM aware that my HTML wouldnt pass W3C HTML validator but thats not the point here, right? Cheers!

    Spacing thousand numbers test

    function formatNumbers() {
        //get the numbers
        var unformatedNumbers = document.getElementsByName("numbers");
        // loop every element with name numbers
        for (i = 0; i 


2000
3000
4000000
5000000000
6000000000000
7000000000000000
  13. knuff Says:
    October 31st, 2006 at 1:49 am

    Well that didnt work. I’ll send you a mail, if you like it you could post it here.

    Cheers.

  14. Jens Says:
    October 31st, 2006 at 10:07 am

    knuff: what I guy, thanx-a-lot. Yeah, you could mail me at jens [at] jedisthlm.com

  15. knuff Says:
    October 31st, 2006 at 6:20 pm

    Did you get it? My example was pretty sloppy but it should give you an idea. It dosent work on numbers that are > 999 and has more zeros that can be divided with 3.

    Cheers!

  16. Jens Says:
    November 1st, 2006 at 11:25 am

    knuff: No I did’nt receive any mail. Try agin to send it to my mail address.

  17. knuff Says:
    November 1st, 2006 at 12:42 pm

    Crap. Perhaps your spamfilter is to agressive? Anyway, gmail has deleted the script section of the HTML-file. I’ll try to resend it when I come home. Havent got the file at work. This time I zip the HTML.

    Cheers!

  18. Lars Gunther Says:
    November 10th, 2006 at 12:08 am

    I’ve written about this on my site in Swedish at http://keryx.se/artikel-45

    You may want to check that out.

  19. Jens Says:
    November 10th, 2006 at 12:26 am

    Lars: Thanks a lot for that article, well written I must say.

Leave a Reply


Jens Wedin Mail me Portfolio