Re: [CSS3] horizontal/vertical-align ?

--------------------------------------------------
From: "Tab Atkins Jr." <jackalmage@gmail.com>
Sent: Thursday, April 22, 2010 8:18 AM
To: "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: <www-style@w3.org>
Subject: Re: [CSS3] horizontal/vertical-align ?

> On Wed, Apr 21, 2010 at 11:46 PM, Andrew Fedoniouk
> <news@terrainformatica.com> wrote:
>> Are there any plans to
>> a) fix 'vertical-align' property  b) and to introduce something like
>> 'horizontal-align' ?
>>
>> Consider this:
>>
>> span {
>>  display: table-cell; /* or display:inline-block */
>>  vertical-align: bottom; /* ?????? */
>> }
>>
>> It is not clear what vertical-align: bottom means here.
>>
>> vertical-align  has completely different meanings in different  contexts.
>>  In display:table-cell it means alignment of element's content and in 
>> inline
>> context - alignment of the element itself.
>>
>> I am considering this as a bug of specification.
>>
>> In principle it has to be separate property like content-vertical-align
>> or vertical-align should accept two values: self-alignment and
>> content-alignment.
>
> vertical-align is the way it is for mysterious legacy reasons, and
> can't be changed at this point.  Far too much content depends on
> vertical-align acting the way it does for table-cells and inlines.
> CSS2.1 does define exactly what it means to use it in the two
> contexts, though; in the vertical-align entry, it specifically calls
> out that the property has a different meaning on table cells, and
> points you to the table chapter for details.

Sorry, but my question still stands -
what does vertical-align mean here:

span
{
  display: table-cell;
  vertical-align: bottom;
}
?
If it is a content of the span alignment then how to apply
its vertical alignment in line box as here:
span
{
  display: inline-block;
  vertical-align: bottom;
}

This bug in specification prevents vertical-align
to be used with any other elements that establish
float layout context.  E.g. flexboxes of David Baron
or elements under the 'flow' container as in my case.

>
> The main use-cases for horizontal-align are addressed by flexbox,
> which is a layout mode very similar to static layout, but designed
> more for the layout of blocks than of text.
>

flexbox is about free space concept and when element
overflows there is no such space at all.

Yes, you can say

cont { flow:vertical; }
cont > elem {  margin-left:*; width:XXXpx; margin-right:0; }

to right-align elem box horizontally but this does not address
case when 'cont' overflows .

Flow/flexes and vertical/horizontal-align makes the layout
system complete as these are parts of the same
algorithm/functionality.

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Thursday, 22 April 2010 16:39:39 UTC