1,105,531 Community Members

gauge size in pixel and browser rounding up/down

Member Avatar
Violet_82
Veteran Poster
1,002 posts since Jan 2010
Reputation Points: 14 [?]
Q&As Helped to Solve: 6 [?]
Skill Endorsements: 8 [?]
 
0
 

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

Member Avatar
Taywin
Posting Maven
2,632 posts since Apr 2010
Reputation Points: 134 [?]
Q&As Helped to Solve: 378 [?]
Skill Endorsements: 17 [?]
 
0
 

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

Member Avatar
Violet_82
Veteran Poster
1,002 posts since Jan 2010
Reputation Points: 14 [?]
Q&As Helped to Solve: 6 [?]
Skill Endorsements: 8 [?]
 
0
 

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

Member Avatar
Taywin
Posting Maven
2,632 posts since Apr 2010
Reputation Points: 134 [?]
Q&As Helped to Solve: 378 [?]
Skill Endorsements: 17 [?]
 
0
 

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.

Member Avatar
Violet_82
Veteran Poster
1,002 posts since Jan 2010
Reputation Points: 14 [?]
Q&As Helped to Solve: 6 [?]
Skill Endorsements: 8 [?]
 
0
 

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?

Member Avatar
Violet_82
Veteran Poster
1,002 posts since Jan 2010
Reputation Points: 14 [?]
Q&As Helped to Solve: 6 [?]
Skill Endorsements: 8 [?]
 
0
 

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

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article