Re: Inline h*ll

Eric A. Meyer writes:

I believe I'm somewhat of an expert on CSS, so let's see how far I get
:-)

>    The user agent determines which elements and glyphs are to be in a given
> line (using whatever mechanism it uses to calculate such things).  So let's
> say it has an anchor, some letters, and then a boldface element, like this:
> 
>    <A>anchor</A> some angry letters <B>boldface</B>
> 
> In the simplest case of this example, these are all the same font and font
> size, there are no box properties set for the inline elements, and there is
> no leading due to line-height.  Thus, the line-box is as tall as the font
> used to generate the text, and will enclose the descenders in "angry" as
> well as any (hypothetical) capital letters.  Correct?

Correct.

I assume that by "no leading" you mean that 'line-height' has been set 
to '1' or to '1em'.

(Actually, whether the line box encloses the descenders and ascenders
or not is unpredictable. We know the line box is 1em high, but we
don't know how tall the letters are. But in general, for a typical
book face, i.e., not a "fantasy" face, the ascenders and descenders
are indeed inside the line box.)

>    Let us now introduce a change in font size for one of the elements.
> We'll set the anchor to be 200% the size of everything else.  We'll denote
> this in ASCII by making it all uppercase.
> 
>    <A>ANCHOR</A> some angry letters <B>boldface</B>
> 
> Now, how are the various pieces of the line positioned vertically?  I would
> argue that they all align on their baselines, since that's the default
> value of 'vertical-align'.  Correct?

Yes.

>    Let's add a 'line-height' value to the line.  We'll make it '12pt',
> which we will assume to be the same size as the letter and boldface text.
> This means that the anchor also has a 'line-height' of '12pt', because
> 'line-height' is inherited.  However, its text is 24pt (200% * 12pt) in
> size.  So how tall is the line-box, really?  12 points or 24 points?  If
> the latter, how can out-sized text "bleed" out of the line into other
> lines, since line-boxes don't overlap?

The line-box is 12pt high or a little more. The A box has a negative
leading: -6pt one both sides.

There is actually a small flaw (IMHO) in the way CSS adds the leading.
Let's make the example even more concrete by picking concrete values
for the position of the baselines, then we can see why the line box is
"a little more" than 12pt high.

Assume the 12pt font has a depth of 3.5pt below the baseline (and
therefore 8.5pt above it). The 24pt font we assume to have a depth of
7pt (and thus a height of 17pt). If we add the leading to this, we get
an A box that is 17pt - 6pt = 11pt high and 7pt - 6pt = 1pt deep. The
line box encloses all of them and is therefore max(11pt, 8.5pt) = 11pt
high and max(1pt, 3.5pt) = 3.5pt deep. Conclusion: the line box in
this example is 11pt + 3.5pt = 14.5pt high(!)

    17 +-------------+
       |             |
    11 | - - - - - - | - - - - - - - - - - - - - - - - - - top of line box 
   8.5 |             |--------------------+----------+
       |             |                    |          |
       | A N C H O R | some angry letters | boldface |
    0 _|_____________|____________________|__________|____ baseline
    1  | - - - - - - |                    |          |
  -3.5 |             |--------------------+----------+ - - bottom line box
       |             |
   -7  +-------------+

In other words: although the A box is 12pt high, as desired, it is
shifted with respect to the other boxes.

(I am starting to think that this is worth an erratum, but I'm not sure
how to fix it.)

>    Moving on, let's assume that the entire line is enclosed in a SPAN.
> 
>    <SPAN><A>ANCHOR</A> some angry letters <B>boldface</B></SPAN>
> 
> Furthermore, let's put a border on the SPAN.  Is the border is drawn around
> the outside of the text, or around the ghost box implied by the value of
> 'line-height'?  Does the top border cut through the middle of the ANCHOR,
> since it's twice as tall as the 'line-height' of its parent and itself?
> Does the border surround the box implied by the 'font-size', or by the
> 'line-height', or around the line-box?  Does it change if we explicitly
> assign a 'line-height' to the SPAN, or not?

(Here we come to an area that I would rather not not have specified.
The original proposal was to create borders for inline elements by
means of the 'text-decoration' property. That would have made it
impossible to specify the exact position of the box, just as it is
impossible to specify the exact position of the underline, and
implementations could have done whatever made sense in each situation,
which could even have depended on what kind of border it was.)

The border will be "correct" only for the font of the SPAN itself: the
border will be just above and below the middle text ("some angry
letters") and it will therefore go through the letters in the A box.

Assuming the baseline position that I gave earlier, the top border
will be 8.5pt above the baseline and the bottom 3.5pt below it.

Note that the 'line-height' has no effect whatsoever on the border.
Only the 'font-size' of the SPAN determines the height of the border
box.

>    For even more fun, let's set the anchor to 'vertical-align:text-top'.
> Now how is the line laid out?  Where is the SPAN's border drawn?

The A box is shifted down a bit, but the border is not dependent on
the A box, so it stays where it was.

>    Now replace the anchor with an image which is 24pt tall, but is still
> text-top aligned:
> 
>    <SPAN><IMG> some angry letters <B>boldface</B></SPAN>
> 
> Once more: how is the line positioned vertically, and where is the SPAN's
> border drawn?  How does it change when the image is set back to
> 'vertical-align:baseline'?  How is this affected by setting 'margin:1pt' on
> the image?  By setting 'margin:-4pt'?  Where are the edges of the line-box,
> and how does this relate to the SPAN's border?

'Line-height' has no (direct) effect on images, so the IMG box is 24pt 
high.

When the image is 'text-top' aligned, the top of the line box is equal
to the top of the other text, i.e., 8.5pt above the baseline, if we
continue the example. And the the bottom of the line box is now
max(15.5pt, 3.5pt) = 15.5pt below the baseline.

    8.5 +----------+--------------------+----------+ - - top of line box
        |          |                    |          |
        |          | some angry letters | boldface |
       _|__________|____________________|__________|____ baseline
        |          |                    |          |
        |          |--------------------+----------+
        |          |
        |          |
        |          |
        |          |
  -15.5 +----------+ - - - - - - - - - - - - - - - - - - bottom line box

The border of the SPAN is still not changed and it will cut through
the image.

When the image is aligned at the baseline, the line box will become
taller: 27.5pt.

     24 +----------+ - - - - - - - - - - - - - - - - - - top of line box
        |          |
        |          |
        |          |
        |          |
        |          |
        |          |--------------------+----------+
        |          |                    |          |
        |          | some angry letters | boldface |
       _|__________|____________________|__________|____ baseline
                   |                    |          |
   -3.5            +--------------------+----------+ - - bottom line box


>    We're still not done, either.  Take the following styles, markup, and
> rendering sketch:
> 
>    P {line-height: 14pt; font-size: 12pt;}
>    BIG {font-size: 300%;}
> 
>    <P>This is a paragraph which<BR>contains a <BIG>BiG</BIG> element<BR>
>       that will do weird stuff.</P>
> 
>    This is a paragraph which
>    contains a BiG element
>    that will do weird stuff.
> 
> Okay.  The "BiG" text is on the middle line.  Its line-height, along with
> everything else, is '14pt'.  How much space will there be between the
> baselines of the three lines?  How much vertical distance will there be
> between the baseline of the "BiG" text and the other text on its line, if
> any?

The first and third line boxes are 14pt high: 1pt half-leading + 8.5pt height +
3.5pt depth + 1pt half-leading.

The second line box has two kinds of boxes:

 - the BiG box has a leading of 14pt - (300% * 12pt) = -22pt, i.e., a
   "half-leading" of -11pt. Assuming the font is 25.5pt high and
   10.5pt deep, the box will be 25.5pt - 11pt = 14.5pt high and 10.5pt
   - 11pt = -0.5pt deep.

 - the other boxes are again 1pt + 8.5pt = 9.5pt high and 1pt + 3.5pt
   = 4.5pt deep

Conclusion, the second line box is max(14.5pt, 9.5pt) = 14.5pt high
and max(-0.5pt, 4.5pt) = 4.5pt deep. The height of this line box is
therefore 19pt.

Between the first and the second baseline we have 4.5pt + 14.5pt =
19pt.

Between the second baseline and the third one we have 4.5pt + 9.5pt =
14pt.

(Again, I don't like this. The line-height of all boxes on the second
line is 14pt, so I would like the whole line box to be 14pt high as
well...)

>    Now alter the above example to use these styles:
> 
>    P {line-height: 1.2; font-size: 12pt;}
>    BIG {font-size: 300%;}
> 
> Again, what are the baseline separations, both between and within lines?

No change to the first and third line boxes, obviously. They are still
9.5pt + 4.5pt = 14pt.

The BiG box on the second line now has a line-height of 300% * 12pt *
1.2 = 43.2pt. The leading is 43.2pt - 36pt = 7.2pt and the
"half-leading" is 3.6pt.

This BiG box now extends 25.5pt + 3.6pt = 29.1pt above the baseline
and 10.5pt + 3.6pt = 14.1pt below it.

This is also the height of the second line box, so the distance
between the baselines is now 4.5pt + 29.1pt = 33.6pt between the first 
two and 14.1pt + 9.5pt = 23.6pt between the last two.

>    Once more, with feeling:
> 
>    P {line-height: 1.2; font-size: 12pt;}
>    BIG {font-size: 300%; vertical-align: middle;}
> 
> Again, what are the baseline separations, both between and within lines?

The BiG box still has a half-leading of 3.6pt, but the change in
alignment means that there is now a different height above and below
the baseline. 'Vertical-align: middle' means that the midpoint of the
BiG box (= 36pt/2 = 18pt) is aligned with the x-height/2 of the parent.

Let's pick a value for the x-height of the parent: 5pt. Then the BiG
box is 2.5pt + 18pt + 3.6pt = 24.1pt high and -2.5pt + 18pt + 3.6pt =
19.1pt deep.

The distance between the baselines is 4.5pt + 24.1pt = 28.6pt and
19.1pt + 9.5pt = 28.6pt resp.

>   To go back a few steps and mix things up a bit:
> 
>    P {line-height: 18pt; font-size: 12pt;}
>    BIG {font-size: 300%;}
> 
> Again, what are the baseline separations, both between and within lines?

First and last line: leading = 6pt, half-leading = 3pt, height = 8.5pt 
+ 3pt = 11.5pt, depth = 3.5pt + 3pt = 6.5pt

The BiG box has a leading of -18pt, and a half-leading of -9pt. Its
height is 25.5pt - 9pt = 16.5pt. Depth is 10.5pt - 9pt = 1.5pt.

The second line box then has a height of max(16.5pt, 11.5pt) = 16.5pt
and a depth of max(1.5pt, 6.5pt) = 6.5pt. This line box is thus 23pt
tall.

Between the baselines there is a distance of, resp. 6.5pt + 16.5pt =
23pt and 6.5pt + 11.5pt = 18pt.

>    If I were to add a SPAN to the markup in the last few examples, and then
> put a border on it so that the second line had a top and bottom border,
> where would it be drawn?  Around the font, the 'line-height', or the
> line-box?

Around the font of the SPAN, and thus it would probably overlap the
font of the BiG. The distance between the baselines would not be
influenced by such a border.

> 
> ============================================================================
> 
> In summary, at least these questions need a definitive answer:
> 
> * What constitutes a line-box?

From the highest top of all the boxes on the line to the lowest bottom 
of those boxes.

> * Is the basic unit of a line-box the individual character glyphs and
> replaced elements, or the inline elements (anonymous or otherwise, replaced
> or otherwise)?

The boxes, not the glyphs.

> * How are the edges of the line-box affected by content? by line-height
> (leading)? by replaced elements?

For a non-replaced element, the content is not considered. Only the
font and the line height count. For a replaced element it is the
opposite: the content counts (or the 'height' property, if set); the
font and line-height are unimportant.

> * Where are the (half-)leading spaces placed? with regard to what?

Above and below the em box.

> * What is within the line-box, and what is without?

Images are always within. Letters are usually within, but that depends
on where the font designer has put them with respect to the em box.
Borders may be within or without, depending on whether the line-height
is sufficiently large or not.

> * Where does the border get drawn around inline elements?

Around the font, without regard for the line-height. (Instead, use
padding to position the border.)

> * What does font-size have to do with all of this?

A lot :-)

> * How is outsized text positioned with regard to the baseline? to the line-box?

That depends on 'vertical-align'

> * How does vertical-align affect the line-box, if at all?

It does.

> * In what order is all of this done, in order to correctly construct an
> element containing line-boxes?

I don't think the order is important.

> * Are there any differences between CSS1 and CSS2 when it comes to all this?

No. If there is, one of the two must be in error.

> * Are there other things I didn't think to ask about, but are important to
> understanding the inline box model?

You didn't mention padding (and margins for the image), but otherwise
I think everything is there.

> 
> If there is one crystal-clear explanation of all this available on the Web,
> please point it out.  Don't be surprised if I come back with more
> questions, though.  This model of clarity would need to demonstrate (at a
> minimum) the full range of how vertical alignment, borders, leading, the
> boundaries of the line-box, and the distance between baselines for a
> variety of element/anonymous combinations in a variety of circumstances,
> including length-based line-heights, scaled line-heights, replaced
> elements, and probably more.
>    Here are two URLs to the promised test page (the second in case we stay
> out of the DNS for any length of time):
> 
>    <URL:http://www.cwru.edu/dms/homes/eam3/css-excl/inline-hades.html>
>    <URL:http://129.22.138.13/dms/homes/eam3/css-excl/inline-hades.html>



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos/                              W3C/INRIA
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Monday, 10 January 2000 10:27:11 UTC