Inline h*ll

Greetings all,

   First, a warning.  This message goes on for a while, and not by
rambling:  it's crammed with questions and scenarios, and for those who
attempt to give answers, it will likely take a great deal of time and
thought to do so.  That's my guess, anyway.  So here goes.

   I have a whole series of questions regarding the inline box model, and
line-height, and font-size, and that stuff.  I know I've brought this up
before, but every time I think I've finally worked out how this supposed to
work, somebody manages to cause me doubt.  I NEED TO KNOW.  This is
critical to me for a few reasons:

1. The answers have impact on how CSS will be able to handle the formatting
of languages other than English/Roman ones.
2. The CSS2 Test Suite will need to be written to test correct behavior,
and it has to be understood in order to write meaningful tests.
3. I'm trying to finish writing a detailed description of all this stuff in
time to meet an end-of-month deadline.
4. Not having a clear, definitive explanation is really ####ing me off.

That's why I care so much (and, with regards to points 1 and 2, maybe why
you should care as well).
   From my readings of CSS, and various discussions with other people, I
think I've come close to a complete understanding of how line-boxes are
generated.  However, I've been told recently that I'm missing a few pieces
of understanding.  I've tried to reconcile what I've been told with what I
can read in the specs, and I've had a great deal of trouble doing so.  This
causes me to wonder if maybe other people haven't had the same problem.
Hopefully, we can work all this out in public, so that everyone can be on
the same page.
   I'll try to go through this with some semblance of clarity.  Feel free
to berate me if I obfuscate, or if I commit any errors, or if I'm just
proving once and for all that I'm dumb as a post.  (In that last case,
though, make sure you provide a clear and complete explanation of how all
this works so that I can fully appreciate how dumb I am.)
   When you reach the end of this message, you'll find the URL of a test
page which you can use to check your expected results of most of the
examples in this message against the user agent you prefer.  If anyone can
come up with a screenshot-- faked or otherwise-- which provides a reference
rendering for the test page, then let's see it.  I may add more tests after
this message goes out, if I think of them.  In any case, scrutinizing the
source will be key to making sure your user agent (or screenshot) are
correct.  Good luck!


   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?
   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?
   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?
   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?
   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?
   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?
   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
   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?
   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?
  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?
   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


In summary, at least these questions need a definitive answer:

* What constitutes a line-box?
* 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)?
* How are the edges of the line-box affected by content? by line-height
(leading)? by replaced elements?
* Where are the (half-)leading spaces placed? with regard to what?
* What is within the line-box, and what is without?
* Where does the border get drawn around inline elements?
* What does font-size have to do with all of this?
* How is outsized text positioned with regard to the baseline? to the line-box?
* How does vertical-align affect the line-box, if at all?
* In what order is all of this done, in order to correctly construct an
element containing line-boxes?
* Are there any differences between CSS1 and CSS2 when it comes to all this?
* Are there other things I didn't think to ask about, but are important to
understanding the inline box model?

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):


Eric A. Meyer  -  -

Received on Sunday, 9 January 2000 16:13:41 UTC