RE: Proposal: text-vertical-position property

Ben Cotterell wrote:

| An inline box has a baseline, ascent, descent, x-height etc. Those
| reference points are used to align child inline boxes within it
| depending on the child inline boxes' values of vertical-align.

The position of the baseline, etc., depend on the font and the y-coordinate
within the font that is used to position the text relative to the vertical
center of the inline box. Currently, that y-coordinate is a point halfway
between the top and bottom y-coordinates of the font's bounding box. I
contend that authors should be able to specify the relative position of that
y-coordinate.

| ...
| This is why if you set line-height: 100px and vertical-align: top on a
| block, the text inside it doesn't actually end up at the top of the line
| box at all.

If font-size: 100px, it ends up at the top of the line box if you take
accented upper case glyphs into account, does it not?

| ...
| If you had a property to align text in inline boxes, then I think you
| would also need to tighten the definition of inline box height (10.6.1),
| and probably to allow height or min-height to be set on them.

The vertical position of the text within the inline box does not affect the
height of the inline box. How would allowing authors to change that position
necessitate tightening definitions or changing allowances?

| But I would actually prefer to make vertical-align: top | bottom |
| new-kinds-of-middle align to final line box. I think that's simpler.

If you don't change the relative position of the text within the inline box
then you don't solve the problem. Try using 'vertical-align: 20px' on a SPAN
and see what I mean. In any case, vertical-align is relevant for inline
elements, not anonymous inline boxes.

I've been playing around with vertical-align on a SPAN here:
http://www.hpaa.com/css2/textalign.htm
I've only tried Firefox and Opera with this, and Opera has problems
scripting text-align. Interesting effect: with 'text-align: top', try
setting font-size to 20px (same as line-height), then reduce the size
further. The line box height increases as font-size decreases below 20px,
unless you set the line height smaller as well.

| ...what does cap-height mean for, say,
| a Chinese font? I'm not sure you even get x-height in all fonts, you
| just have to guess it from the em-height.

If a font's cap height is undefined, use the default positioning. As for
x-height, refer to CSS2.1, section 4.3.2.

cheers,
David Perrell

Received on Friday, 25 January 2008 17:33:17 UTC