Firefox Leading Bug

Arno Enslin's picture

Not yet fixed, but very bothering. Firefox tries to provide the CSS line-height as precise as possible with the result of an uneven line height. It rounds up and down.

<style type="text/css"><!--
pre {
line-height: 0.95em !important;
font-size: 16px !important;
font-family: Arial, Helvetica, sans-serif !important;
}
--></style>

Si_Daniels's picture

I think this bug is likely "by design". If you want pixel level control you should specify pixels?

Arno Enslin's picture

Pixel is a bad unit for the font-size (line-height, letter-spacing, padding and borders as substitution for text-decoration and so on). I used it here for demonstration purposes only. If you use pt or em, you cannot use px for the line-height anymore, because one pt is converted to different numbers of pixels dependent from the relative screen resolution. On a high resolution screen you would need more pixel for correcting the line height.

(Typographers have the tendency to design web pages pixel precise. I think, that it is one of the reasons, why typographers are not the best web designers.)

I have an untested workaround for the Firefox versions, that support @font-face: You could provide a font, that contains the space only, and put it into the first place of a font stack. You can correct the line height by the font dimensions of the space-only-font.

But I would prefer it, if Mozilla would fix this bug. It is not directly a bug, but they had the specifications in mind only. They simply wanted to compute the height of the block as precise as possible. But the evenness of the leading is a thousand times more important. In case of the leading of body text one pixel is much.

Arno Enslin's picture

That was fast, John. Thanks! A few years ago I stopped my commitment to Mozilla, when I was suspended on mozillazine (because I wrote, that some changes of the skin of Firefox were “bullshit”, but that word seemed already too dirty for a few child protecting extremist moderators and a certain exorcist with a licence for being arrogant as bounty for more than 10000 posts). Well, my reaction was not less ridiculous. I thought, that anybody else would see the problem and report that bug, but I should have reported it by myself.

Arno Enslin's picture

The bug is not yet fixed in Firefox 4.0 beta 6.

Arno Enslin's picture

Maybe they need more people that confirm the bug.

Test case

Bug report

Arno Enslin's picture

Please register at Bugzilla and vote for the importance of that bug. Mozilla does not seem to be interested in fixing this bug. I cannot imagine, that you like uneven line spacing.

https://bugzilla.mozilla.org/show_bug.cgi?id=442139

aluminum's picture

Firefox does this up and down rounding in other places, where it's actually a huge benefit compared to what the other browsers do (namely when dealing with horizontal percentage widths in a flexible container).

So I can see it being the 'norm' by design.

That said, I can't see a reason for it remain that way for line spacing. So while it may not be a bug, it really is something that should be looked at and fixed.

Si_Daniels's picture

A "fix" would require subpixel baseline positioning, right? Anyone know which popular apps, OS, or frameworks don’t put text baselines on whole pixel boundaries? If InDesign or Acrobat can get away with it, then that might push browsers in the same direction.

Cheers, Si

Arno Enslin's picture

Subpixel baseline positioning? No, I don’t think, that this has to do with subpixel baseline positioning. 0.95 em are equal tp 15.2 px, if 1 em is 16 px. So, if the font size is 16 px and the line height 0.95 em, Firefox creates a line height of 16 px for every sixth line. And the height of the other lines is 15 px. Dependent from the fraction of em you have different line heights in the same text block. There is no other browser with that bug. I assume, it is a question of minutes to fix that bug! But it is not yet fixed, although it is documented since 2008.

Again, the problem can also appear, if the unit for the font size is em or any other unit.

aluminum's picture

"I assume, it is a question of minutes to fix that bug!"

Anyone that has ever written software will roll their eyes at you if you say that. ;)

It may, though I have a hunch it's tied into the overall rounding algorithms used everywhere (see previous post). They likely don't see it as a bug, and perhaps a more useful approach would be to present to the Mozilla group as it being an exception that needs to be added.

Arno Enslin's picture

@ aluminium

About which algorthm are you talking?

If the em is 16 px and the lineheight is defined as 0.95 em for the same element, then it has do be rounded down from 15.2 px to 15 px. That’s the whole "algorithm", isn’t it? If it exceeds 15.4 px, because the line height is defined as 0.975 em for example, it has to be rounded up to 16 px.

Khaled Hosny's picture

You know, "font" people think the only complex (and the only important) piece of software are the fonts themselves, every thing else is trivial and its bugs can be fixed in minutes :p

aluminum's picture

@arno:

It's just a hunch. I'm basing that hunch on how Firefox does rounding elsewhere. For instance, if you set up a horizontal layout with TDs or DIVs all set to percentage widths, it does the same thing...it rounds up AND down to make sure the total = 100%. This is different than other browsers. IE rounds everything up OR down (so you end up short or over). Opera rounds everything down (so you end up short).

My thought was maybe it's a universal aspect of Firefox so not necessarily easy to change for one particular element (in this case line-spacing).

Syndicate content Syndicate content