Subject: [css-d] line-height calculations

From: gavin at refinery.com (Gavin Kistner)
Date: Thu, 24 Apr 2003 23:21:43 -0600

Forgive me if this is a FAQ. Can someone explain to me which of the 
browsers is 'right' from the screenshots on this test page:
http://phrogz.net/tmp/lineheighttest/index.html

My expectation was for the way Camino/Mozilla did it to be right. 
(Under the assumption that 100% was based off of the 'standard' line 
height, and hence >100% should result in increased line spacing, not 
decreased.)

But now the spec seems to imply that something like Safari may be more 
correct. I'm just...very unused to Mozilla getting something wrong. 
(Camino is built off of the Mozilla 1.0 trunk, IIRC, but the appearance 
is the same in 1.2.1 also.)

---

From: gleemax at attbi.com (John Lewis)
Date: Fri, 25 Apr 2003 06:00:13 -0500

> height, and hence >100% should result in increased line spacing, not

The suggested default line-height value is between 1 and 1.2, but
there is no rule saying browsers need to follow it. Any value is
acceptable according to CSS2. That means it's impossible to determine
if a value greater than 100% will be bigger, smaller, or the same. All
this without taking crazy user style sheets into account!

After reading CSS2, playing with line-height in Opera 7.1 and Mozilla
1.4a, and comparing renderings for far too long, I'm stumped. I really
have very little idea of how the inline box model and line-height are
supposed to work. For the most part, with identical values Mozilla and
Opera returned similar and even identical results. That's comforting.
For some reason, Mozilla doesn't behave anything like Camino. At first
I thought my test page was strange; then I visited your page and the
Mozilla result look basically identical to Opera and Safari. I can't
explain the Mac IE or Camino results. I don't expect line-height to
behave like that, but I'm pretty weak on the theory.

The shoddiness of the Win IE rendering is self-evident.

I'd be interested to see if anyone knows or can figure out why my
Mozilla and your Camino rendering look so different. I don't use
Mozilla much, so I haven't changed anything but the default font.

-- 
John Lewis

---

From: ian at hixie.ch (Ian Hickson)
Date: Fri, 25 Apr 2003 09:35:15 -0700 (PDT)

> http://phrogz.net/tmp/lineheighttest/index.html

The 'default' value is pretty loose, such that actually pretty much all
the renderings are correct.

However, having said that, the intention of the Mozilla guys is that
'default' use the font's specified default line height, which I don't
think works correctly on Mac (I know it doesn't work exactly right on
Windows).

-- 
Ian Hickson                                      )\._.,--....,'``.    fL
"meow"                                          /,   _.. \   _\  ;`._ ,.
http://index.hixie.ch/                         `._.-(,_..'--(,_..'`-.;.'

---

From: kr43m0r at earthlink.net (Lonnie)
Date: Fri, 25 Apr 2003 13:13:51 -0500

> > http://phrogz.net/tmp/lineheighttest/index.html

As you've learned, the default line-height is determined by the UA with the W3
recommendation that it be between a factor of 1 to 1.2 of the font-size.

To override the default UA treatment, you can simply set your preferred
line-height in the ICB of the document and let the cascade naturally adjust. Be
aware though, that you should set line-heights as a factor rather than in a
specific unit. For example,

html, body {
font-size: 16px /*I'm not promoting fixed sizes, just making an example.*/
line-height: 18px;
}

will be problematic when your long unstylyed <h1> wraps - effectively doing a
font-size of about 2x the default (32px) but cascading the 18px line-height. The
wrapped lines are going to overlap. However, if you use a factor,

html, body {
font-size: 16px /*I'm not promoting fixed sizes, just making an example.*/
line-height: 1.2;
}

the line-height will cascade appropriately for in each descendent element.

So, if on your test page, you use

.col1 p {line-height:1;}
.col2 p {line-height:1.1;}
.col3 p {line-height:1.2;}

you'll find much better x-browser behavior.

Lonnie