Re: box-align

On Fri, Apr 29, 2011 at 9:33 AM, Andrew Fedoniouk
<andrew.fedoniouk@live.com> wrote:
>> 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.

The re-use of 'vertical-align' to do content alignment in table cells
was inarguably a mistake.


>>> 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.

This is fairly simple.  The inline-layout model asks the inline-block
for its baseline.  The baseline of an inline-block is defined as the
baseline of its last in-flow linebox.  So then you need to lay out the
inline-block.  Do so, respecting the alignment, and return the
position of the last linebox.  Then, align the inline-block within its
line accordingly.

This is precisely the same as what you would do *without* 'box-align'.
 The 'box-align' property doesn't add any complexity whatsoever to the
overall process - it's just one more step in laying out the
inline-block before you can return the baseline.


> From implementation standpoint the only reasonable interpretation of
> 'vertical-align' is that it defines inner-alignment inside flex block (as in
> table-cell).

No, the reasonable interpretation of 'vertical-align' is that it
doesn't apply to flexbox items, as they're not in a linebox, just like
how it doesn't apply to display:block elements.  'vertical-align' only
controls alignment of inline-level elements within a linebox
(excepting the one mistaken exception of table-cells).

~TJ

Received on Friday, 29 April 2011 19:56:08 UTC