Re: vertical-align and line-height

Thanks for the quick reply! See comments below.

Regards,
Em2 Solutions AB
Michael Jansson



L. David Baron wrote:
> On Thursday 2009-02-26 17:30 +0100, Michael Jansson wrote:
>   
>> I don't understand how the height of the single line is being computed  
>> for the middle block element in Firefox and Opera. I would expect it to  
>> be 100px, since none of the inline elements are taller than that.  
>> However, I get a taller block in Firefox and Opera. I can also see that  
>> there is actually two line boxes if I select the text in the browser. I  
>> only expect one.
>>     
>
> Neither is taller than 100px, but they're not at the same position.
> The half-leading goes evenly on each side of the font, so the line
> is supposed to end up taller than 100px.
>   
Hm... don't think I quite understand. Are you saying that the 
line-height is 100px within each inline box, but because of the 
positioning, the line box containing all the inline boxes will end up 
being taller? Seems odd. I would expect the end result (not the 
individual parts of the line box) to honor the line-height. I think the 
spec states that as well, right!? I did some measuring and found the 
middle div to be 140px in both Firefox and Opera.

I did some more tests to compare how the line-height is computed, since 
my initial understanding seems to be wrong. I get roughly the same 
distance between lines in Opera and Firefox, and different results in 
both Safari and IE. Also, I'm getting different distances between lines 
if vertical-align is used or not (although it won't actually affect the 
alignment) in all browsers except IE, which is not what I would expect 
as a web author. Also, I find that the distance between the lines is not 
the chosen line-height value (which was chosen to be big enough to add 
leading). Again, as a web author I would expect the line height (from a 
typographical point of view) to be the value of line-height and I think 
the spec states that too!?
>   
>> Second mystery is that the text is not being text-bottom aligned in  
>> Firefox and Opera for the middle case. Intuitively, I wouldn't expect  
>> setting the line-height to affect the vertical alignment. I would expect  
>> case 2 and 3 to give the same result.
>>     
>
> This is because 'text-bottom' aligns the bottom of the box (which
> includes the half-leading, which is different sizes for different
> pieces of text) to the bottom of the parent's text.  (In this case,
> there isn't any text in the parent, but it still has metrics.)
>   
So using the line-height would give the inlines the half-leading which 
will make them all the same height as the line-height!? Any of the 
top/bottom values for the vertical-align would thus have no effect since 
the inline boxes would already be both top and bottom aligned (having 
the same height). Is that it?

Is this good? More specifically, why does the spec require the leading 
to be such that the glyphs are vertically centered?  I can't see the 
technical reasons for this (incidentally IE does not center the glyphs 
vertically, but will honor the vertical-align instead), and I can see 
lots of uses for aligning text with vertical-align. I deal with lots of 
non-Latin text and lots of typography in general. Seems odd also that 
one property will disable another property for some but not all elements 
(e.g. not for replaceable elements, right!?).

I'd like to see a revised spec where the second paragraph in section 
10.8.1 does not require the glyphs to be centered vertically. I guess 
there are other procedures for making such requests? What's you opinion 
on such as change though? I would very much like to learn what this 
requirement was put into the spec in the first place.

Lots of question and comments. Lets see if I can summarize:
1) Why does vertical-align affect the typographical line height (the 
vertical distance between two lines), even in cases where the 
line-height is much taller than the content height of the inline boxes 
of a line box?
2) Why isn't the line-height the same as the typographical line height 
in most browsers?
3) Why does the css 2.1 spec require glyphs to be vertically centered 
when adding leading? Put differently, is text forced to be vertically 
align when line-height is used and if so, why?

> -David
>
>