[css-align] Add shorthands for alignment properties

[fantasai]

Can't find where this was originally filed, but there was a request to add shorthands for the alignment properties, e.g. align-items+justify-items = foo-items.

foo-items: <'align-items'> <'justify-items'>?
foo-self: <'align-self'> <'justify-self'>?
foo-content: <'align-content'> <'justify-content'>?

Name "foo"!

[Suggestions so far are "arrange" and "place".]

[keithjgrant]

“compose” might be a viable option.

[jensimmons]

I mentioned this on Twitter and Harry Roberts suggested distribute.
https://twitter.com/csswizardry/status/786249388687437824

[achalv]

(Found this link to this issue through Jen's tweet, hope you don't mind me jumping in! :] )

+1 for "arrange"

[MatsPalmgren]

Without a separator like / between the two values, things like foo-items:center safe right are ambiguous.

[jensimmons]

I feel like arrange could potentially be confusing because it's too close to align.

It's hard to remember which is which already:
justify-self
align-self
justify-items
align-items
justify-content
align-content
(and for a refresher, the values are things like space-between, space-around, start, end, center, etc.)

adding:
arrange-self
arrange-items
arrange-content
to that list seems confusing. hm.

I like distribute. I'm sure there are other good words, too.

And btw, the CSSWG welcomes feedback from everyone. From anyone who writes CSS. This is where the sausage gets made, and this decision is something you'll have to live with. So feel free chime in. Do think about all people who write CSS, and what would be good for them (not just your own personal feeling). Think about the fact many (most?) people who write CSS do not speak English. We want to pick words that will work globally.

[meyerweb]

I like distribute-items and distribute-content, but place-self makes more sense to me than distribute-self. Ditto on all counts even if distribute is replaced with arrange.

[MatsPalmgren]

+1 for "place" since it's short and encompass what all these properties do.
"arrange" seems more vague to me, it could mean "sort" or other ways of arranging.

I don't like "distribute" because only the *-content properties are about "distribution" (the *-self and *-items are about alignment, not distribution.) Also, it's too long. :-)
https://drafts.csswg.org/css-align-3/#content-distribution

[keithjgrant]

I do agree w/ @jensimmons about these names getting confusing. It’s certainly worth considering whether the convenience of a shorthand is worth adding more very similar names to the mix.

Outside the box idea: Could align-* be extended to become the shorthand, supporting both the cross-axis and the main-axis values?

[MatsPalmgren]

That won't work so well for *-content because align-content:stretch end would be valid both as a single value and as a shorthand with two values. It would work if a separator is required though.

[rchrdnsh]

kinda digging 'place' at the moment, over 'arrange' and 'distribute'. So, 'align-self: center' + 'justify-self: center' would = 'place-self: center'... or 'place-item: center', or 'place-content: center'

yeah, liking that one :-)

[Crissov]

• spread-items, spread-self, spread-content
• splay-items, splay-self, splay-content

[SebastianZ]

• spread-items, spread-self, spread-content
• splay-items, splay-self, splay-content

spread-self and splay-self don't make sense to me (same for distribute-self). Also (as a non-native speaker) I've never heard the word splay so far.

'arrange' might be misspelled as 'arange' and, as @MatsPalmgren mentioned, it may also be misinterpreted.

So I vote for place-*.

The names {align,justify}-{items,content} are already bad choices. I always forget whether I need to use align-* or justify-* and whether to use *-items or *-content.

I'd love to see them bikeshedded, but unfortunately it's already too late to change them.

Sebastian

[liamquin]

On Wed, 2016-10-12 at 10:57 -0700, Jen Simmons wrote:

I feel like arrange could potentially be confusing because it's too
close to align.

It's hard to remember which is which already:
justify-self
align-self
justify-items
align-items
justify-content
align-content

Traditionally in graphic design i think we have,

• distribute items - put even amounts of space between them
• align items - line them up along a common axis in some way
• justify items - distribute space between them so the edges align with
  two outer axes
• position items - a pretentious way of saying put items into their
  assigned places

There are some other terms used in design and composition but I don't
think they are relevant here.

"arrange" is a more general term that subsumes all the ones I listed, I
think.

Liam

[shospodarets]

+1 for the "place" shorthand prefix.
Short and reflects the purpose IMO.

I created a PostCSS plugin to try in my projects and see the real benefits of having such shorthands:
https://github.com/malyw/postcss-alignment-shorthands

For now, it uses "place" but is easily configurable to apply any other.