Re: Inline h*ll

On Wed, 12 Jan 2000, Matthew Brealey wrote:
>>>: <p style="line-height: 14pt; font-size: 12pt;"> This is a
>>>: paragraph which<BR>contains a <BIG style="font-size:
>>>: 300%;">BiG</BIG> element<BR> that will do weird stuff.</P>
>>> Since the line-height declaration is 14pt, there should be 14pt
>>> between baselines, regardless of the content.
>> No. All inline boxes on the line are 14pt high, but the baselines
>> are in different positions due to the effect of "half-leading".
>> Since the inline boxes are aligned vertically on their baselines,
>> the resulting line box is higher than 14pt.
> Given:
>:  <p style="font: 12pt/14pt">
>:   Some text<br>
>:   <span style="font-size: 300%">Some big text</span><br>
>:   Some more text
>:  </p>
> a) P has 3 line boxes.
> b) the height of these line boxes is from the top of the uppermost
> box top to the lowermost box bottom
> c) the height of the box is given by line-height.
>
> Therefore, the P element is 42pt high.

No. On the second line there is an empty inline element (<br>) which
has a line-height of 14pt but which must be baseline aligned with the
<span>. Since the logical inline box (the line-height) of the <span>
is in the middle of the <span>'s text, and therefore considerably
higher than the baseline (glyphs are vertically centred), the (end of
the) second line looks something like this:

                                         The inline box of the SPAN
    t                        t          / element, which is 14pt high
    t                        t         /  due to the line box.
  ttttt                    ttttt      /
    t                        t       /
 ---t-------eeeee---x-----x--t-----+''''''''''''''''''''''''''''''''''
/|\ t      e     e   x   x   t     |        The empty inline box for
 |--t------e-----e----x-x----+-----+      / the BR inline element, which
 |  t      eeeeeee     x     t           /  has the same line-height and
 |  t   t  e          x x    t   t      /   is also baseline aligned.
 |  t   t  e     e   x   x   t   t     +
 |___ttt____eeeee___x_____x___ttt______|______________________BASELINE
\|/,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,+,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
     \
      \
        The dotted line represents the resulting height of the line
        box for the line containing the SPAN element. Note that it is
        considerably bigger than the <SPAN> element's line-height.

Note that the lines shown above would never actually be rendered by a
UA. If a border was applied to the SPAN, for example, it would
surround the *font-size*, not the line-height.

BTW. It would be helpful, and would make your messages easier to read
(IMHO) if you could wrap your lines at the more usual 75 characters
rather than 60, and if you could use nicer formatting than inline HTML
-- for example, make sure that text that you quote has not overwrapped
(and reflow it if it has). Also, it would be very helpful if you could
make examples that you quote as simple as possible (e.g., do not
involve absolute positioning when discussing the inline box model.)

Cheers,
--
Ian Hickson                            ("`-''-/").___..--''"`-._
http://www.bath.ac.uk/%7Epy8ieh/        `6_ 6  )   `-.  (     ).`-.__.`)
                                        (_Y_.)'  ._   )  `._ `. ``-..-' fL
Member, Mozilla Quality Assurance     _..`--'_..-_/  /--'_.' ,'
Browser Standards Compliance Team    (il).-''  (li).'  ((!.-'

Received on Wednesday, 12 January 2000 08:42:15 UTC