Re: [css-backgrounds] background-position-x/y and logical positioning

On 08/02/2015 10:27 PM, Greg Whitworth wrote:
>> Actually, background-position-x/-y have already been decided to be
>> standardized [1] (see "Add -x/-y longhands to background-* properties"
>> section).
>>
>> But looks like there is unfortunately no progress since then.
>>
>> [1] https://lists.w3.org/Archives/Public/www-style/2014Apr/0188.html
>
> I thought we had talked about it at some point, they all seem to blur
> together anymore. So let's just consider this a slight nudge then to
> the editors :)

Dropped in a (very) rough draft into backgrounds-4:
   https://drafts.csswg.org/css-backgrounds-4/#the-background-position

The tricky part about this (and therefore the reason we didn't have it
earlier) is the interaction with logical positions. Tab had a proposal
for handling this. What's I drafted up is mostly the same, but I changed
some of the keywords to make it a little easier to follow the expansions.

The <position> syntax now works like this:

A) Physical Directions Only

    Same syntax as Level 3, roughly
      <x-keyword> <offset>? <y-keyword> <offset>?
    where <x-keyword> is [ left | right | center ]
    and <y-keyword> is [ top | bottom | center ]
    and <offset> is [ <length> | <percentage> ]

    Assigns into background-position-x and background-position-y.

B) Flow-relative Directions Only

    <logical-keyword> <offset>? <logical-keyword> <offset>?
    where <logical-keyword> is [ start | center | end ]

    Assigns into background-position-inline and background-position-block.

C) Logical/Physical Mix

    Expands <x-keyword> and <y-keyword> with axis-constrained logical variants:

      <x-keyword> <offset>? <y-keyword> <offset>?
    where <x-keyword> is [ left | right | center | x-start | x-end ]
    and <y-keyword> is [ top | bottom | center | y-start | y-end ]

    Assigns into background-position-x and background-position-y.

Examples:

   background-position: top left;
   /* top left corner */

   background-position: start start;
   /* block-start inline-start corner */

   background-position: x-start top;
   /* top left in English, top right in Hebrew, top right in Japanese */

Tab's original proposal used unprefixed 'start' and 'end' for C (mixed)
and 'block-'/'inline-' prefixed keywords for B (pure logical). This made
assignments in the mixed case a bit hard to follow, and purely logical
positions very verbose. Using x-start/y-start variants makes it easier
to follow what's getting assigned into what, and the 'start start'
syntax follows the way we're handling border-radius longhands.

That said I'm not averse to expanding out case B with prefixes as Tab
originally suggested, at least in the shorthand. It will be more explicit;
but it's also more verbose and the keywords won't quite match their form
in the longhand.

(I'd prefer to avoid redundancies like 'background-position-block: block-start'.)

~fantasai

Received on Friday, 14 August 2015 20:24:36 UTC