[CSS21] line boxes, line-height and zero height floats

In a recent thread (which I need to reply to some messages) [1], I 
stated this to Anton.

   | It's possible to have line-height: 0 which shows no
   | leading and overlapping line boxes. The overlap is
   | roughly 80% of the height of the line box (the one
   | I conceptualized).

This was based on a test case that Anton had put in the message that I 
replied too and just testing in Firefox 9.

In another part of this thread, I had stated that when line boxes 
(whatever the are) have a line-height applied, this line-height value 
determines if a line box can flow beside a float of equal height 
(noticed in this test case [2]).

I have somewhat contradicted myself it seems because both statements can 
not be true. After working on a interactive test case as a reply to 
Gérard list message (still in the works), I have come across something 
which I have never tested or observed before (I dare say that Anton and 
Bruno may have knowledge of this).

Below is a test case that is testing three type of line boxes flowing 
beside a zero height float.

1. anonymous inline element.
2. inline element (inline-level)
2. block element (block-level)

http://css-class.com/test/css/text/linebox-line-height-012.html

When 'line-height: 0' is selected for all test, I expected to see in all 
browsers what I observe in IE9 and WebKit and that is where the two 
longer floats are touching (since the shorter float has zero height) and 
the line box or content box has it's upper half leading over the top 
longer float and it's lower half leading over the bottom longer float.

In Opera 11.60, I observe something different. The first two test 
'anonymous inline element' and 'inline element (inline-level)' show the 
two longer floats touching but the line box or content box is only 
bleeding upwards over the top longer float. The last test 'block element 
(block-level)' is even more strange since any line-height less than 
normal (the default) does not show.

In Firefox 9, I also observe something different. The first two test 
'anonymous inline element' and 'inline element (inline-level)' shows the 
two longer floats separated by a gap and when the line-height is less 
the about 0.67 (for Times New Roman), then the alignment of the content 
box is not vertically centered but rather aligned by the baseline. As 
the line height is reduced, the line box or content box is only bleeding 
upwards over the top longer float and the gap when is it minimum (based 
on the x-height) is always the vertical height of the distance between 
the baseline and the vertical midway line (guide line ?) of the 
line-height box (to use a term). This screenshot shows this gap.

http://css-class.com/test/temp/lines-FF.png

In Firefox 9, the last test 'block element (block-level)' renders the 
same as IE9 and WebKit where the two longer floats are touching and the 
line box or content box has it's upper half leading over the top longer 
float and it's lower half leading over the bottom longer float.


1. http://lists.w3.org/Archives/Public/www-style/2012Jan/0352.html
2. http://css-class.com/test/css21testsuite/linebox-leading-014.htm



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Monday, 16 January 2012 02:37:50 UTC