W3C home > Mailing lists > Public > www-style@w3.org > April 2011

Re: box-align

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Fri, 29 Apr 2011 12:55:21 -0700
Message-ID: <BANLkTim=p0Vm4RhmkNPbCCw8ff+dsfr87Q@mail.gmail.com>
To: Andrew Fedoniouk <news@terrainformatica.com>
Cc: Alex Mogilevsky <alexmog@microsoft.com>, Brad Kemper <brad.kemper@gmail.com>, www-style list <www-style@w3.org>
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).

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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:45 UTC