Re: box-align

On Apr 30, 2011, at 10:56 AM, L. David Baron wrote:

> On Saturday 2011-04-30 10:17 -0700, Brad Kemper wrote:
>> I recall arguing for putting it on the parent instead of the
>> children in that conversation too. It is much more intuitive to
>> set the alignment on the parent than to find all the children and
>> have them work it out individually what alignment they should each
>> be. Consider 'text-align', which is orders of magnitude more
>> intuitive than 'margin-left:auto; margin-right:auto;'. With
>> 'text-align' on a single line, the children are the glyphs and
>> spans and such inside the line box parent. But we only ask the
>> parent to align its children once; we don't ask each glyph and
>> span what it's alignment should be relative to its parent.
>> 
>> Aligning different child blocks differently is much more confusing
>> (to people, not necessarily to "the model") and harder for
>> authoring. I don't think this actually removes anything, anyway.
>> You can still use 'margin-left:auto; margin-right:auto;' or
>> flexible margin using flex-box.
> 
> Yeah, I think you're right -- specifying how the children are
> aligned is better.
> 
> But there's also the question of whether the property inherits --
> for the use case of adding a property that describes the
> backwards-compatible <center> behavior, the property would affect
> children and it would inherit -- but I'm not sure if inheritance is
> wanted here.  

I don't see a problem with letting the block alignment inherit, and I do like the idea of being able to describe traditional <center> and <DIV @align> behavior.

> If this doesn't inherit, browsers will still need some
> concept that does inherit to implement <center> and <div align=...>.
> (But if that continues to be the kludge of extra values on
> text-align, it's not clear to me how that would interact with
> box-align.)

I pretty sure I don't understand. How is text-align affected?

I imagined something like this:

center { 
	block-align-x: center; 
	text-align: center; 
}
div.vert_center { 
	block-align-y: middle; 
	vertical-align:middle /* for inline vertical centering */; 
}

div.all_center { 
	block-align: center /* same as block-align: center middle */;
	text-align: center; 
	vertical-align:middle /* for inline vertical centering */; 
}

With:

block-align: [left|center|right]? [top|middle|bottom]?
with at least one value required. Initial value is 'block-align:left top'.

A good question (to me, anyway) should be how this fits with bidi. Should vertical always be vertical, or should block-align-y actually be translated as something like 'block-align-block-progression-direction'? I lean towards the later, so that there is symmetry with the inline alignments (text-align and the inline version of vertical-align). If so, then we also need start, end, etc.

Received on Saturday, 30 April 2011 18:37:39 UTC