Re: Inline h*ll

--- Ian Hickson <py8ieh@bath.ac.uk> wrote:
> 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.
> 
I remain entirely unconvinced. I would appreciate if
someone can explain how (for example) the border is
where it is.

> 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, 
I am unable to do this unfortunately.
> 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.)
It was designed to test it as efficiently as possible.
If I have time, I'll put up a non-positioned one.
 

=====
----------------------------------------------------------
From Matthew Brealey (http://members.tripod.co.uk/lawnet (for law)or http://members.tripod.co.uk/lawnet/WEBFRAME.HTM (for CSS))
__________________________________________________
Do You Yahoo!?
Talk to your friends online with Yahoo! Messenger.
http://im.yahoo.com

Received on Thursday, 13 January 2000 08:03:03 UTC