Re: box-align

>From: Tab Atkins Jr. 
>Sent: Thursday, April 28, 2011 11:04 PM 
>To: Andrew Fedoniouk 
>Cc: Alex Mogilevsky ; Brad Kemper ; www-style list 
>Subject: Re: box-align 
>
>On Thu, Apr 28, 2011 at 9:35 PM, Andrew Fedoniouk
><andrew.fedoniouk@live.com> wrote:
>>
>>  "if it's current definition were not so complicated already"
>>
>> and what exactly is so complex there?
>>
>>  "If there is a new kind of alignment, it should be a new property."
>>
>> Umm... Alignment is alignment. I am not sure I understand you here...
>
>'vertical-align' is not usable for block-level alignment.  It already
>has a well-defined meaning - it aligns inline-level elements within
>the linebox.
>
>Aligning block-level children of an element is something quite
>different, and thus should be a separate property.
>

It would be a true statement if not vertical-align 
in table-cell elements where it defines exactly
what you are going to use for the box-align. 

Conceptually table-cells replaced in table-row are
very close to what is expected from flow:horizontal
and vertical alignment there.

>
>> Are you saying that you expect to see something like:
>>
>> inline-box {
>>  vertical-align: baseline;
>>  box-align:top right;
>> }
>>
>> ?  What would be the final alignment then?
>
>Yes, those two work together just fine.  The element in question is
>baseline-aligned within its linebox, and then its children are aligned
>to the top and right of it.

But what will be the baseline of such setup?

Consider this markup:

<p>Sample <inline-box>
           <div>1</div>  
           <div font-size:200%>2</div>  
          </inline-box> text</p>

What will be computed first: 

a) vertical alignment inside inline-box (and so  
   inner boxes '1' and '2' will not have common baseline) and 
   then an attempt to align these jagged baseline inside line box, or
   
b) vertical alignment inside line box using
   some yet unknown baseline and then 
   alignment inside the inline-box. Where
   will be the baseline after that?
   
In short I would like to see visualization of 
"those two work together just fine" using the markup
above.

>From implementation standpoint the only 
reasonable interpretation of 'vertical-align' 
is that it defines inner-alignment inside 
flex block (as in table-cell).
*And* also it defines [outer-]alignment of the 
flex block itself when it is placed inside line box.

In non-inline contexts vertical-align works just
fine as it is now.

And yet different layout managers have 
conceptually different interpretation of 
vertical/horizontal alignment.

As an example:

horizontal-align:right in 

- flow:horizontal block moves all elements
  as the whole to the right.

- flow:vertical block moves elements one
  by one to the right so individually.

- in flow:"template" both vertical and horizontal
align move elements as a whole in both directions.

- flow:horizontal-wrap moves all elements
  in a row to the right.

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Friday, 29 April 2011 16:33:44 UTC