[css-align] Allowing fallback alignments without breaking shorthands #1002

Open
fantasai opened this Issue Feb 2, 2017 · 7 comments

Comments

Projects
None yet
6 participants
Contributor

fantasai commented Feb 2, 2017 edited

When adding the place-* shorthands, we realized that specifying a fallback alignment for the content distribution keywords (space-around etc.) resulted in parsing ambiguities. We debating using a slash in the shorthand, but decided not to because it would make 2-axis alignment syntax inconsistent with similar syntax elsewhere in CSS, e.g. for scroll-snap-align or background-position.

An alternate idea is to use the slash to separate the fallback from the initial. Imho this also helps make it clearer that we're declaring a fallback alignment, since slashes are used to indicate alternates in general typographic usage.

Examples:

justify-content: space-around / center; /* space-around, fall back to center - both axes */
place-content: space-around / center; /* space-around both axes, fall back to center */
place-content: space-around start / center; /* space-around b-axis, start x-axis, fallback center */

(I think it's probably best to consider this for Level 4, leaving fallback keywords out for Level 3 so we can take Level 3 to CR asap.)

Member

tabatkins commented Mar 14, 2017

This sounds like the values are basically parallel; why not just use commas to separate the fallback from the normal?

An alternate idea is to use the slash to separate the fallback from the initial.

I think that would be very confusing because slash is already used in the CSS Grid shorthands (grid, grid-template, grid-area etc) to separate row-axis from column-axis values. A slash in the place- shorthands should have the same meaning, i.e. place-content: <align-value> / <justify-value>.
Examples:

place-content: space-between start / center; /* space-between b-axis with start fallback, center i-axis */
place-content: space-between / center; /* synonym to "space-between center" */
Contributor

javifernandez commented Apr 19, 2017

i agree that a slash would be better used as a separator for row-axis and column-axis values. It even makes the shorthand's syntax clearer, IMO

I don't think this syntax issue should be deferred to L4, because adopting the proposal to use / as the separator will be impossible at that point since it wouldn't be backwards compatible. place-content:space-between start currently means align-content: space-between; justify-content: start whereas if we adopt / as the separator and allow for fallback values in the shorthands, then it's a single value and means align-content:space-between start; justify-content:space-between start.

It seems to me that / was actually the preferred separator by most people when the shorthands were discussed in issue #595. Using space as the separator was only accepted under the assumption that fallback values and <overflow-position> would never be allowed in the shorthands. It seems that assumption is now false and I would like to withdraw my "commenter satisfied" for issue #595, fwiw :-).

If you don't want to resolve on an extended syntax here for L3, then I request that these shorthands be deferred wholesale to L4 to avoid creating a situation were the preferred syntax can't be introduced because it would break the web.

Contributor

fantasai commented Jun 27, 2017 edited

No, I was suggesting that the slash separates the initial and the fallback, not the axes. So we'd have align-content: space-between / center for the longhand. This would help make it clearer that center is a secondary value, vs. the current syntax align-content: space-between center.

Then for the shorthand, place-content: space-between / center would set both align-content and justify-content to space-between / center. In cases where you want different values in each axis, we'd follow the border-radius shorthand pattern, e.g. place-content: space-evenly / start center would assign align-content: space-evenly / start; justify-content: space-evenly / center.

(Syntax of border-radius is border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?, described in https://www.w3.org/TR/css3-background/#corners, for reference.)

astearns removed the Agenda+ F2F label Aug 1, 2017

The CSS Working Group just discussed Syntax for fallback alignment in the place-* shorthands, and agreed to the following resolutions:

  • RESOLVED: slash must be use to separate main value and fallback value in shorthand and longhands alignment properties
The full IRC log of that discussion <fremy> Topic: Syntax for fallback alignment in the place-* shorthands
<TabAtkins> GitHub: https://github.com/w3c/csswg-drafts/issues/1002
<fremy> TabAtkins: we would like to allow all combinations in the shorthand that are possible in the longhands
<fremy> TabAtkins: but if we just allow spaces, this would be ambigous
<fremy> TabAtkins: we need to have a separator to know which values are fallback for what
<fremy> TabAtkins: usually this kind of separator is the slash "/"
<fremy> TabAtkins: but if we decide to use a separator, should we do axis-1 / axis-2 or value/fallback value/fallback
<fremy> TabAtkins: former is annoying because you always need the slash
<fremy> TabAtkins: I believe the latter is better for that reason
<Rossen> q?
<fremy> fantasai: sounds it would make the longhand easier to read
<fremy> fantasai: (the slash)
<fantasai> s/sounds/
<fantasai> s/sounds//
<fremy> TabAtkins: there would be a second proposal to make the longhand also have the slash
<fantasai> s/second//
<fremy> fantasai: The proposal is to do both, not just for shorthand
<fantasai> https://github.com/w3c/csswg-drafts/issues/1002#issuecomment-311501471
<fantasai> align-content: space-between / center
<fremy> TabAtkins: even align-content would use space-between / center
<fantasai> lace-content: space-between / center
<fremy> TabAtkins: with center as the fallback
<fantasai> �place-content: space-evenly / start center
<fremy> Rossen: I like it better than what we have right now
<fantasai> align-content: space-evenly / start; justify-content: space-evenly / center
<fantasai> (same as above)
<TabAtkins> place-content: space-evenly space-between / center; <= different distribution, same fallback
<fremy> rachelandrew: I think it makes sense
<fremy> Rossen: anyone else?
<fremy> Rossen: let's resolve then
<fremy> Rossen: any objection to use the slash for fallbacks in all alignments?
<fremy> RESOLVED: slash must be use to separate main value and fallback value in shorthand and longhands alignment properties
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment