Stop bitching and grab your fucking calculator

Saturday, February the twenty eighth, two thousand and nine.

Something that’s been bugging me for quite a while is the way that my beautifully (yep, that’s right; beautifully) crafted websites seem to suffer from the occasional - seemingly inexplicable - hiccup in every common web browser but Firefox.

Odd, I say.

Of course I’m referring only to pure EM based layouts, any monkey can slap together a pixel perfect site using whole numbers, throw some decimal places into the mix and you’ve got yourself some real web development.

If, at this point, the number 62.5 pops into your head; fuck off, you’re not welcome here.

Right, so let’s set the scene. You have a parent node, its font size is 16px, this is a constant. This element has a child, it’s 12.785em wide.

Here comes the science… 12.785*16 = 204.56

Ah, so, we all remember from school that anything greater than point five is rounded up to the nearest whole number, and of course we can hardly expect our browsers to render .56 of a pixel, so the child is 205px wide?

Ha.

Browser developers obviously didn’t attend the same school as I did. They take my careful calculations and carelessly throw away the .56; the resulting element is 204px wide.

I know I take things a little too personally, but this seems really quite patronising, as if the browser is mocking my silly pixel precision madness… “did you really mean .56 of a pixel, surely not?!”.

Yes, I sodding well did, round the fucking thing up, or at least store the values with as much precision as modern computing will allow, then, once you’re done traversing the DOM, add them together and round the result to the nearest whole number.

So, is Firefox correct while everyone else is wrong? Not exactly. The clever chaps at Mozilla have come up with their own way of handling pixel precision. Take the example above, add two further child elements with the same width as the first, check the result in Internet Explorer, Safari or Opera and you’ll end up with three elements that are 204px wide (that’s 612px… I know, stick with me here). View the same page in Firefox and you’ll see a 205px element followed by a 204px element followed by another 205px element.

That’s some crazy-ass normalisation.

Anyway, I suppose I should come up with some sort of conclusion…

1. For the love of god, don’t use 62.5%, you’re just creating unreconcilable rounding inconsistencies
2. Do your calculations before you start coding, don’t just jump in swapping pixels for ems willy-fucking-nilly
3. Try to keep your font sizes to whole-pixel equivalents
4. If you still foresee rounding issues, try to squeeze in some hidden overflow
5. No? Designer bitching about your extra pixel? Have no eye for design yourself? Sit down and explain the problem, I’m sure you can work something out
6. Still stuck? There’s no hope for you. Luckily web development is inherently pointless anyway. Be thankful that you suck at it, go enjoy your life.