- From: Matthew Brealey <thelawnet@yahoo.com>
- Date: Tue, 21 Dec 1999 04:27:36 -0800 (PST)
- To: www-style <www-style@w3.org>
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