Line-Height... lineheight... line-height

Consider this a Public Service Agreement: There is a bug loose in the internet. It’s a subtle bug but so far every browser I have checked has some variation of this bug.

So what is this bug? Will it eat my website? Does it carry diseases? Is it a virus?! Will there be zombies?

Ok, calm down. Let me answer those in reverse order (because it’s more fun that way).

There will be no zombies as a result of this bug. I promise. We’re pretty sure about that.

It is not a virus. There are many viruses on the internet but this is not one of them.

It does not seem capable of carrying diseases.

Generally it will not eat your website, though it probably lives there without you knowing about it. This is generally not an issue, though if your website develops odd line spacing, spots, blurry vision, delusions of grandeur, ugly layouts, bad design in general, or starts acting strangely, we suggest that you consult with a professional. Also, if your website starts talking to you please seek proper medical or professional attention.

The bug is embedded in the way that various browsers deal with math, and line-height in specific. For an example go look at this link in as many browsers as you can get your hands on: http://jsfiddle.net/95cqM/1/

The line-height value changes based on whether it is specified merely as a ratio or using the em unit of measure, which is a ratio. All browsers except Firefox demonstrate this part of the bug, returning different values for the two which are theoretically equivalent.

The second aspect of the bug is that there really shouldn’t be a way to specify fractional pixels. The concept of fractional pixels doesn’t actually exist. A pixel size is an integer, no decimals allowed because a computer doesn’t know how to draw half a pixel. At least as far as I know…

Realistically this is more of an interesting discovery, and less of a problem. Unless you are doing some calculation based on line-height in javascript you won’t see any weird behavior as a result of it. If you are… well you’re going to need to account for this weirdness in your calculations. Welcome to the Internet!

Published: 31 Jul 2013 | Tags: line-height , css , js