W3C home > Mailing lists > Public > www-style@w3.org > May 2012

Re: [css3-flexbox] Bikeshed ALL the things

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 24 May 2012 09:32:55 -0700
Message-ID: <CAAWBYDAy5hRWb0kFGaFAC1mv-5jnGTkcrYjL-_nfye=HYj=tYQ@mail.gmail.com>
To: Brad Kemper <brad.kemper@gmail.com>
Cc: www-style list <www-style@w3.org>
On Thu, May 24, 2012 at 7:51 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
> On May 23, 2012, at 10:31 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
>
>> The only remaining naming bikeshed is the start/end keywords in the
>> 'align-*' properties
>> <http://wiki.csswg.org/topics/start-end-before-after-align>.  We have
>> two options:
>>
>> 1. The current world, where both justify-* and align-* use "start" and "end".
>> 2. More closely match the logical axises, and make align-* use
>> "before" and "after".
>>
>> The argument for (1) is that, first, using different keywords to
>> accomplish basically the same thing in two properties is confusing,
>> and second, these aren't the logical axises.  I *actually* call the
>> directions "main-start/end" and "cross-start/end" in the Flexbox spec,
>> and just drop the prefix for brevity in the property value.
>
> Another argument for (1) is that it is hard to remember which of the start/end or before/after pairs are for inline/x axis and which are for block-progression/y axis. You can remove the space "before" or "after" the glyphs on a line, just as you can remove it from where the blocks "start" or "end". I don't imagine most authors would be good at remembering which is which, because it it not intuitive.
>
> I'd call my view argument (1.1). We should use the same word for both directions, perhaps with a prefix when more clarity is needed. But "start" and "end" are not opposites. The opposite of "start" is "finish", and the opposite of "end" is "begin" or "beginning". So, I would say, use 'align-items: beginning | end' ('begin' sounds too much like the verb, and 'ending' sounds too much like the end of a story), 'text-align: beginning | end', 'block-align: beginning | end', 'grid-column/row-align: beginning | end'.

I don't understand where you're getting this argument.  "start" and
"begin" are synonyms, as are "end" and "finish", and neither are
necessarily tied to each other by convention.


> 'before' and 'after' sound like they are outside of the thing you are aligning within, whether it is a line-box, block, grid block, or whatever.

I agree that before/after aren't a great pair for this (particularly
since ::before and ::after exist).  If you have better suggestions,
you have a week to make them before we stabilize the values.


> Maybe for other uses, like absolute positioning, you could have the property names be 'top | right | bottom | left | block-beginning | inline-end | block-end |  inline-beginning'. And, for example, have 'linear-gradient(to inline-end, black, white)' (yeah, I went there).

That seems a bit verbose. I'd prefer to keep the logical directions
single-word.  Plus, the inline directions already have precedent in
the language - they're start/end and we can't change them without very
good reason.


>> The argument for (2) is that, first, using the same keyword in different axises is confusing,
>
> The four keywords are confusing to begin with (or to start with), beforehand.

Well, we're stuck with two of them.


>> and second, while they're not an exact match for the logical keywords in Flexbox, they *are* in Grid and probably Block, as both of those always lay out relative to the current writing mode.
>
> Grid already has the axis in the property name. I'm not sure what you mean by "probably Block". Would that be something like 'block-align'?

I think you're missing the context of this discussion.  Grid is
switching to the justify/align-* properties, same as Flexbox.  The
justify/align-* properties will also apply to Block Layout - there are
already definitions for this in the Box Alignment draft (css3-align).

What I meant in that paragraph is that in Grid and Block, the
justify/align axis distinction is tied to the writing-mode.  Thus, it
makes some sense to go ahead and use the writing-mode dependent
keywords there, with start/end in justify-* and before/after (or
whatever) in align-*.  Flexbox is different, as the direction of the
justify/align axis is determined by flex-direction.

~TJ
Received on Thursday, 24 May 2012 16:33:47 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:54 GMT