Vertical alignment: unsolvable and indeterminate cases

This message addresses two issues.  The first is a problem where the
top and bottom values of CSS's 'vertical-align' lead to unsolvable
situations, if their current wording is taken literally.  The second is
a possible solution to the problem of indeterminate situations with
'top' and 'bottom'.  At the end, I try to explain how whole thing works
(that is, my interpretation of the spec, which I think is somewhat
unclear, but does define how things should work in detail).

First, some definitions needed for any complete definition of the top
and bottom values.  Some of these definitions are rather arbitrary, and
I'm just defining them so I don't have to repeat the same ten word
phrases.

root of the line: the anonymous inline element that surrounds the
  entire line, as I proposed in [1].  There has to be some notion of
  this, or else many things don't make sense.

loose: has vertical-align = top or vertical-align = bottom or is the
  root of the line

anchored (to parent):  not loose.  Every anchored element has a
  specified vertical position relative to its parent element.  If
  its parent moves, it does too.

anchored (to arbitrary ancestor):  A descendant Z is anchored to an
  ancestor A if Z is not loose and none of the ancestors of Z that are
  also descendents of A are loose.

full top:  The full top of an element is the top of the anchored
  descendent (or the element itself) whose top is highest.

full bottom:  same thing, reversed

full height:  the distance from the full top to the full bottom

(I don't like the terms "full bottom" and "full top."  "Full height"
came first.)

  Note that the top and bottom here refer to the box created by the
  line-height (the "logical box").  The box described by font-size,
  padding, and border is not really the element's box, but could be
  called its "visual box."

unsolvable cases
----------------

Unsolvable situations arise if a loose element that has vertical-align:
bottom has descendants anchored to it that extend below its bottom or
if an element with vertical-align: top has descendants anchored to it
that extend above its top.  When this is true, the bottom of the
element cannot touch the bottom of the line box as required by the
definition of bottom (top is analogous):

  Align the bottom of the box with the bottom of the line box. [2]

( This would not be a problem if the elements within it that protrude
out of the line.  This would make the bottom of the line no longer the
bottom of the lowest element, as required by [3]:

  The line box height is the distance between the uppermost box top and
  the lowermost box bottom. )

Thus I think the definition of top [2] should be changed to read:

  Align the full bottom of the box with the bottom of the line box.

and top should be changed analogously.

a solution for indeterminate cases
----------------------------------

(This assumes that Eric is right about what he said earlier today and
that an element can be top aligned with itself.  It never occurred to
me that it couldn't.  It has to be allowed.)

CSS does not fully describe the result if the tallest (in full height)
loose element in the line is not the root of the line.  This is what I
mean by an indeterminate case.

There are a number of ways one could make a rule so that this is not
indeterminate.  I think the best would be to treat the largest element
(in full height) as the root of the line (that is, to place it first),
and place the root element of the line as if it had the alignment of
the largest loose element (which is either top or bottom).

an algorithm for computing line height and alignment
----------------------------------------------------

This is basically a rewrite of a message I wrote in private email, but
I think it will help to understand what I said above.  It is how I
think line heights should be calculated on the whole.  The whole thing
depends on my first proposal (unsolvable cases), but only part of rule
3 depends on my second proposal (indeterminate cases).

1) Find the "full height" of the outermost element in the line and all
the "loose" elements within it.  This is done using the line height and
vertical alignment of all the attached children of each loose element.

2) Determine the tallest (in full height) loose element in the line and
place it so its full top is even with the top of the space available
for the line (this is either the bottom of the previous line box or the
content edge of a block-level element).  The top of this element is the
top of the line box, and the bottom of this element is the bottom of
the line box.

3) Place all other loose elements so their full top or full bottom
(depending on their vertical-align value) even with the top or bottom
of the line box.  If the tallest loose element in the line is not the
root of the line, then place the root of the line as if its
'vertical-align' were the same as that of the tallest loose element.

David

[1] http://lists.w3.org/Archives/Public/www-style/1999Jan/0027.html
[2] http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align
[3] http://www.w3.org/TR/REC-CSS2/visudet.html#line-height

-----------------------------------------------------------------
L. David Baron    Freshman, Harvard    dbaron@fas.harvard.edu
Links, SatPix, CSS, etc.  < http://www.fas.harvard.edu/~dbaron/ >
WSP CSS AC                < http://www.webstandards.org/css/ >

Received on Saturday, 27 March 1999 19:51:12 UTC