Line boxes, again

Some changes I believe should be made to line boxes:

<blockquote>
'vertical-align'
Value:  
baseline | sub | super | top | text-top | middle |
bottom | text-bottom | <percentage> | <length> |
inherit
Initial:  
baseline
Applies to:  
inline-level and 'table-cell' elements
Inherited:  
no
Percentages:  
refer to the 'line-height' of the element itself
Media:  
visual
This property affects the vertical positioning inside
a line box of the boxes generated by an inline-level
element. The following values only have meaning with
respect to a parent inline-level element, or to a
parent block-level element, if that element generates
anonymous inline boxes; they have no effect if no such
parent exists.
Note. Values of this property have slightly different
meanings in the context of tables. Please consult the
section on table height algorithms for details.
baseline
Align the baseline of the box with the baseline of the
parent box. If the box doesn't have a baseline, align
the bottom of the box with the parent's baseline.
middle
Align the vertical midpoint of the box with the
baseline of the parent box plus half the x-height of
the parent.
sub
Lower the baseline of the box to the proper position
for subscripts of the parent's box. (This value has no
effect on the font size of the element's text.)
super
Raise the baseline of the box to the proper position
for superscripts of the parent's box. (This value has
no effect on the font size of the element's text.)
text-top
Align the top of the box with the top of the parent
element's font.
text-bottom
Align the bottom of the box with the bottom of the
parent element's font.
<percentage>
Raise (positive value) or lower (negative value) the
box by this distance (a percentage of the
'line-height' value). The value '0%' means the same as
'baseline'.
<length>
Raise (positive value) or lower (negative value) the
box by this distance. The value '0cm' means the same
as 'baseline'.
The remaining values refer to the line box in which
the generated box appears:
top
Align the top of the box with the top of the line box.
bottom
Align the bottom of the box with the bottom of the
line box.
</blockquote>
I would propose amendments to this:

Inherited:  
Yes

baseline
If the element is non-replaced, align the baseline of
its boxes in each line box with the baseline of each
of those line boxes.
If it is replaced, align the the bottom of the box
with the baseline of its line box.
middle
If the element is non-replaced, align the middle of
its font with the vertical midpoint plus half the
x-height of each of the tallest font in those line
boxes.
If it is replaced, align the vertical midpoint of the
box with the baseline of the line box plus half the
x-height of the tallest font in that line box. 
text-top
If the element is non-replaced, align the top of its
font in each line box with the top of the highest
piece of text in those line boxes.
If it is replaced, align the top of its box with the
top of the highest piece of text in its line box.
text-bottom
If the element is non-replaced, align the bottom of
its font in each line box with the bottom of the
lowest piece of text in those line boxes.
If it is replaced, align the bottom of its box with
the bottom of the lowest piece of text in its line
box.
<percentage>
Place the baseline (or bottom for replaced elements)
of the element's box(es) above (positive value) or
below (negative value) the baseline of its line
box(es) by this distance (a percentage of the
element's 'line-height' value). The value '0%' means
the same as 'baseline'.
sub
Same as a negative <percentage>, except the browser
determines the <percentage>, which should be a fixed
value, regardless of font-size.
super
Same as a positive <percentage>, except the browser
determines the <percentage>, which should be a fixed
value, regardless of font-size.
<length>
Place the baseline (or bottom for replaced elements)
of the element's box(es) above (positive value) or
below (negative value) the baseline of its line
box(es) by this distance. The value '0cm' means the
same as 'baseline'.

Note that middle may result in the element overflowing
its line box. If this occurs, the element should be
allowed to overflow the line box - the line box should
not be increase in size.

Note that sub, super, <percentage> and <length> values
should be clipped if they would result in the element
overflowing the line box. E.g., given a line box of
height 12px with font size of 12px, sub, super,
<percentage> and <length> can have no effect.

Equally, given vertical-align: 4px with a line box of
18px with font size of 12px, since there is only (18 -
12)/2 = 3px of leading above the top of the text, the
value would be clipped to vertical-align: 3px.

---
These amendments follow the approach (except for the
clipping, which all browsers get wrong) of Opera. E.g:
<p>
Some text here <span style="vertical-align: sub">and
some subscripted <span style="vertical-align:
baseline"></span>The same vertical alignment as 'Some
text here' in Opera, but as 'and some subscripted' in
IE</span>.
</p>

----
In addition I would suggest that:

 The height of a line box is determined as follows:
The height of each inline box in the line box is
calculated (see "Computing heights and margins" and
the 'line-height' property).
The inline boxes are aligned vertically according to
their 'vertical-align' property.
The line box height is the distance between the
uppermost box top and the lowermost box bottom.
Empty inline elements generate empty inline boxes, but
these boxes still have margins, padding, borders and a
line height, and thus influence these calculations
just like elements with content.
Note that if all the boxes in the line box are aligned
along their bottoms, the line box will be exactly the
height of the tallest box. If, however, the boxes are
aligned along a common baseline, the line box top and
bottom may not touch the top and bottom of the tallest
box.

becomes

Although it usually seems that there is only one line
box, there are actually two, an inner line box and an
outer line box. This is due to the need to place
vertical margins, padding and borders on inline
elements.

The height of the outer line box is equal to the
largest value for:
1. line-height plus vertical [margin, padding and
border] properties on all non-replaced elements in the
line box, and
2. height plus vertical [margin, padding and border]
properties on all replaced elements in the line boxes.

The height of the inner line box is equal to the
largest value for these:
1. line-height on all non-replaced elements in the
line box, and
2. height on all replaced elements in the line boxes.

Empty inline elements generate empty inline boxes, but
these boxes still have margins, padding, borders and a
line height, and thus influence these calculations
just like elements with content.

In most cases (i.e., if the inline elements do not
have any vertical padding, margins or borders),
however, the inner line box will be the same height as
the outer line boxes.

The distance between the bottom of the inner line box
and the bottom of the outer line box is given by the
element in the line box with the largest value for the
sum of padding-bottom, border-bottom-width and
margin-bottom.

The distance between the top of the outer line box and
the top of the inner line box is given by the element
in the line box with the largest value for the sum of
border-top-width, margin-top and padding-top.

The baseline of a line box:
The baseline of a line box will vary according to the
font's script. For fonts that use the lower baseline
(Latin, Greek, et al) for alignment, it is determined
thus:

bottom of inner line box to lower baseline = (line
box's inner height - maxValueOf(largest value for
font-size, largest height in that line box))/2 +
(largest descent value in the line box)

Backgrounds, padding, margins and borders on inline
elements:

The bottom of padding-top is placed at the bottom of
the outer line box above the element with which it is
associated.

If the element spans more than one line box, several
padding-tops will be induced.

Since vertical box model properties on inline elements
necessarily must increase the effective height of the
whole line box, it will only be apparent which element
the padding is associated with if the element's
background is different from transparent.

The bottom of border-top-width is placed at the top of
padding-top.
The bottom of margin-top is placed at the top of
border-top-width.

The background of the inner box is ALWAYS coloured by
the background value for the inline element that
overlaps with it there.

and 

10.6.1 Inline, non-replaced elements
If 'top', 'bottom', 'margin-top', or 'margin-bottom'
are 'auto', their computed value is 0. The 'height'
property doesn't apply, but the height of the box is
given by the 'line-height' property.

becomes:
10.6.1 Inline, non-replaced elements
If 'top', 'bottom', 'margin-top', or 'margin-bottom'
are 'auto', their computed value is 0. The 'height'
property doesn't apply, since the element may consist
of many line boxes, each of differing height.

However, the height of each element for the purposes
of vertical alignment is given by font-size.
---
These changes are necessitated for a number of
reasons:
1. inline boxes can't have heights because their
backgrounds should colour the line box, not the inline
box (e.g., a line appears to contain lots of elements,
all with equal line-height, but if you add background
to one, all becomes (un)clear);
2. very serious vertical-align absurdities exist with
the present arrangement, as well as differing
implementations;
3. box model properties are badly/ambiguously
implemented;
4. the status quo is difficult to implement correctly
due to ambiguities;
5. they lead to more attractive results.



=====
----------------------------------------------------------
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!?
Thousands of Stores.  Millions of Products.  All in one place.
Yahoo! Shopping: http://shopping.yahoo.com

Received on Tuesday, 21 December 1999 07:27:45 UTC