Hi all, I was looking into determine the size of some text on 2 websites (basically it is 2 websites a dev and a live copy and I wanted to determine whether they are the same on every browser) and because I couldn't find a way to do that in IEs, I thought I will write a very small internal script to find out:

<script>
var size = $(".myDiv p").css("font-size");
console.log("The size is: " + size);
</script>

That worked ok but I am now trying to put the values I got back from it in use. In IE9 the first website returned this value: 11.93px; The second 12.13px. Now my question is about rounding up and down. From memory and experience I think IEs round everything up, which, in a case like 9.5px is quite easy, because you will get 10px, but what about in relation to the values output above? What's the real size of the text in pixel?
Also, how about the other browsers? Having a quick look around I found this http://ejohn.org/blog/sub-pixel-problems-in-css/ which helps to an extent, but still not quite clear
ANy idea?
thanks

Recommended Answers

All 5 Replies

Here is a link talking about number rounding in different browsers.

thanks, read that, but it is slightly different, in that it rounds number ending with .5, whereas I need oto understand how the whole thing works with numbers ending with any digit, like the one I posted above, and also I don't really want to change the behaviour of the browser, I am just interested in what it does when it comes across these numbers. I mean there they talk about subtracting percentages to make sure that the numbers get rounded up/down to the desired one, whereas I just need to find out what happens
thanks

The different in decimal may result in a little bit of element locations displayed on the browser.

You’ll notice that in Webkit and Opera, which use the rounding-down strategy, there is space leftover. FireFox, IE8, and IE9, on other hand, vary the widths of the boxes so that, in total, they occupy all of the available space. But here’s the catch: when the floating decimal is .5 or greater, our old friends IE6 and 7 stupidly round up, forcing the final column in our example to wrap to the next line since the four columns become collectively wider than their parent container. Facepalm.

It is on the page I posted.

uhm, I see thanks, but how does that apply to text as opposed to divs? I mean, is it the same thing in terms of size?

As far as I can see, it looks like IE9 doesnt' round the pixel: say you get a value of 12.13px, then it attempts to render that, as opposed to IE7 and 8 that will round it down to 12px

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.