Re: [CSS21] Vertical align

On Tuesday 2003-10-07 21:30 +0200, staffan.mahlen@comhem.se wrote:
> An example, assume the below fits on one row horizontally and that 
> the image is higher than the current line-height:
> 
>     <img style="vertical-align: top" src="test.png" />Text <img 
> style="vertical-align: bottom" src="test.png" />
> 
> What should be the result and why?

The correct layout is undefined since (using the terminology in [1]) the
tallest loose subtree in the line is not the one established by the root
inline box.  CSS 2.1 probably should either say this explicitly or
define what should happen (perhaps as proposed in the section of [2] on
indeterminate cases).

> If we switch the last to middle, 
> how does that work (that works the same in all browsers, but i don't 
> quite understand that it really fits how the CSS 2.1 model states it 
> should work).

Again using terminology from [1], the tallest loose subtree is now the
one established by the root inline box, so the layout is defined.

> Another question:
> http://www.w3.org/TR/2003/WD-CSS21-20030915/visudet.html#propdef-
> vertical-align
> "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."
> 
> Why are they not relative to the parent like the other align 
> properties?

Because then they'd be equivalent to 'text-top' and 'text-bottom'?  If
you're asking why they're there or why anyone would want them, I'm not
really sure.  They're not all that useful in anything like text layout,
but they're useful for various tricks such as ensuring that images don't
increase the line box height any more than necessary.

> A testcase:
>     <span  style="vertical-align: top" ><img src="test.png" />in span 
> </span>text<img src="test.png" />
> 
> It seems to me that only one browser makes the first image bleed 
> upwards, which should be the correct way to render the above 
> according to the rec i belive?

Assuming that the image is tall enough, this is the unsolvable case
described in [2].  There is no possible layout that does not contradict
a requirement of CSS2 or of the current draft of CSS 2.1.  Hopefully we
can clarify this case in a future draft of CSS 2.1, perhaps with the
solution in [2], described in more detail in [1].

-David

[1] http://dbaron.org/css/2000/01/dibm
[2] http://lists.w3.org/Archives/Public/www-style/1999Mar/0121.html

-- 
L. David Baron                                <URL: http://dbaron.org/ >

Received on Tuesday, 7 October 2003 15:57:37 UTC