- From: Ian Hickson <ian@hixie.ch>
- Date: Fri, 16 Mar 2001 16:22:07 -0800 (Pacific Standard Time)
- To: James Aylard <jaylard@pixelwright.com>
- cc: <www-style@w3.org>
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