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?
You could use Javascript for the task.
Interesting, but would you insert a span like my example or would you do it differently?
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.
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.
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?
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!
knuff: Thanks for the comment. You say that you don´t think this would be the correct way. Why do you think that?
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!
Thanks for the quick reply
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]
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.
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
Well that didnt work. I’ll send you a mail, if you like it you could post it here.
Cheers.
knuff: what I guy, thanx-a-lot. Yeah, you could mail me at jens [at] jedisthlm.com
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!
knuff: No I did’nt receive any mail. Try agin to send it to my mail address.
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!
I’ve written about this on my site in Swedish at http://keryx.se/artikel-45
You may want to check that out.
Lars: Thanks a lot for that article, well written I must say.