848809 - minimum font-size also enlarges line-height

Status: UNCONFIRMED

(Core :: CSS Parsing and Computation, defect, P5)

Description

[Joris Debonnet]

Attachment: emailing.html

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:19.0) Gecko/20100101 Firefox/19.0
Build ID: 20130215130331

Steps to reproduce:

Got an emailing HTML file from a graphical designer, and broke my head over why Firefox was displaying way more space between successive lines than other browsers while testing it. 

I was able to reduce the problem to just this line: 

<p style="font-size: 1px; line-height: 20px; border: 1px solid black">tiny text</p>


Actual results:

The line has an effective inner height of 180px, 9 times as much as the 20 it's supposed to be, due to my Firefox' setting of minimum font-size: 9px. The line-height css value is proportionally blown up along with the font-size (most likely due to bug 158868's patch). 

The graphical designer clearly used an HTML generator/editor, which would explain why the <p> has both a tiny font-size (so as to not enlargen the <td> it was in) and a line-height (which was probably set on the entire email). 

I attached the original emailing HTML I received, to show why it's a problem. 


Expected results:

I believe the line-height should not be touched when only the font-size is smaller than the minimum font-size, but only (perhaps) if the line-height itself is also below it.

Comment 1

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

We ignore minimum font size when font size is 0; maybe we should also partially-ignore when it's near zero?

Or we could take the approach of adding rather than scaling, but that seems like optimizing for the edge case rather than the normal case.

I'm not really sure what the right solution is here.

Comment 2

[Joris Debonnet]

font size 4px and below are completely unreadable, so if a developer ever chooses that font-size, I'd say it's for layout/design purposes, not to have text that is actually readable. But of course there may be cases when someone on a forum uses a low font size like that just to be annoying, and some people may want to use the minimum font-size setting just for that. Because of this, I guess it's not acceptable to ignore even a 1px font size.

But I think we COULD unlink the line-height-enlarging up to a certain point. If I'm not mistaken, we currently enlarge the line-height along with the font-size (since bug 158868), because otherwise text lines may end up overlapping or have wrong-looking interline spacing. Isn't that the only reason? In that case, we could just leave the line-height alone until it would go below 2x the value of the font size. Everything remains very readable and spatious this way (the intended case), and it avoids getting huge line-heights in cases like my example (the odd case). 

I realise 2 may seems like a random number, but it is the highest interline spacing that is still common. I feel it would in fact be useful even for the 'intended case', because if the line-height is ever higher than 200%, that's most likely to have a special effect in the layout/design, not just to have a normal paragraph of text. You might even consider the value of 150%. 

Using minimum font-size is a user choice that may however mess up the layout of some pages -- minimizing that effect (by limiting line-height scaling) can only be beneficial. 

So I see this as an optimization to the original patch for bug 158868 :)

Comment 3

[Alex Haan]

I'm seeing the same in the given example.

I got here by a similar issue of my own. But the given example clearly demonstrates something going on.

It's interesting how setting CSS font-size to 0 reverts the line-height to the options-set "Minimum font size". While setting it to something else makes the line-height scale out dramatically. The magic of divide by zero?