Re: CSS 2: Table Cells and the "line-height" Property

I am both a member of the working group and a contributor to the Mozilla
project -- but this reply should be taken as my personal view and neither
the view of the working group nor of Mozilla. I thought I'd better get
that out of the way before someone blamed me of bias or something...

On Fri, 16 Mar 2001, James Aylard wrote:
>
> [snip a VERY good summary of the situation]
>
> (Admittedly, I find that the discussion of inline boxes, line boxes,
> etc., quickly becomes confusing -- perhaps I would benefit from
> diagrams!).

See http://www.people.fas.harvard.edu/~dbaron/css/2000/01/dibm


> But if my understanding of the Mozilla argument is accurate, then I
> question whether their position is correct.

Questioning is good! ;-)


> In section 10.8.1, the sentence which immediately follows the one
> cited above is this: "(Except for inline replaced elements, where the
> height of the box is given by the 'height' property.)"

Given the following markup:

   <td><img></td>

...where <td> is either a table cell or a block (i.e. it has an "inner
formatting context" of "block") and <img> is a replaced inline element
(i.e. it has an "outer formatting context" of "inline" and has an
intrinsic size), you end up with a cell that contains one line box
that contains one image, which looks something like this, when you
draw in all the construction lines:

   +-<td>---------------------+
   |+-<line>-----------------+|
   ||#######                 ||
   ||#<img>#                 ||
   ||####### . . . . . . . . || . . . . . . . . . baseline . . .
   ||                        ||
   |+------------------------+|
   +--------------------------+

...because the image is baseline-aligned in the line box whose
baseline is positioned relative to the font of the <td>.

If the markup had been

   <td> <img> f </td>

...with some suitably cursive font so that the "f" goes from the
bottom of the em box to the top of the em box, it would look something
like this:

   +-<td>---------------------+
   |+-<line>-----------------+|
   || #######       _        ||
   || #<img>#      |_        ||
   ||.#######. . . | . . . . || . . . . . . . . . baseline . . .
   ||             _|         ||
   |+------------------------+|
   +--------------------------+

...and if you remove the image so that the font-size is the only thing
affected the line height, then it would look like this:

   +-<td>---------------------+
   |+-<lin_>-----------------+|
   ||    |_                  ||
   ||. . | . . . . . . . . . || . . . . . . . . . baseline . . .
   ||   _|                   ||
   |+------------------------+|
   +--------------------------+

...notice how the cell is now a little shorter -- the image is no
longer increasing the size of the line box.

In conclusion: Yes, the size of inline replaced elements does play a
part, but they still have to be baseline aligned, the position of the
baseline is decided by the parent block element's font, and the line
box has a minimal size set by the parent block element's line-height.

The size is used in deciding how much bigger to make the line box
(since the line-height of the parent block-level element is a minimum
not a maximum).


> Can anyone authoritatively clarify the intent of the CSS 2
> specification with regard to height and line-height, and its
> application to table cells which contain only images? If I am off
> the mark on any point, please straighten me out. I would greatly
> appreciate it.

I'd like to hereby formally propose David's Inline Box Model for CSS3:

   http://www.people.fas.harvard.edu/~dbaron/css/2000/01/dibm

...which I believe is the most thorough and self-consistent
interpretation of the CSS inline box model.

--
Ian Hickson                                     )\     _. - ._.)       fL
Netscape, Standards Compliance QA              /. `- '  (  `--'
+1 650 937 6593                                `- , ) -  > ) \
irc.mozilla.org:Hixie _________________________  (.' \) (.' -' __________

Received on Friday, 16 March 2001 19:20:11 UTC