W3C home > Mailing lists > Public > www-style@w3.org > August 2009

Re: Mirror as background property

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Sat, 29 Aug 2009 16:18:20 -0500
Message-ID: <dd0fbad0908291418m47673d9dn8ed0bc9a7365ff9e@mail.gmail.com>
To: James Elmore <James.Elmore@cox.net>
Cc: CSS <www-style@w3.org>
On Sat, Aug 29, 2009 at 3:40 PM, James Elmore<James.Elmore@cox.net> wrote:
> On Aug 29, 2009, at 11:07 AM, Tab Atkins Jr. wrote:
>> Actual Proposal
>> ===============
>> I propose a new background-* property, background-mirror, which takes
>> the values "mirror-left", "mirror-right", "mirror-top",
>> "mirror-bottom", and "no-mirror".  It defaults to "no-mirror", and
>> will be set to that value if unspecified in the background shorthand
>> property.
> Three comments:
>    First, does "mirror-left" mirror FROM the left half onto the right or
> does it mirror from the right half ONTO the left. Similarly with right, top,
> and bottom. This can be resolved with a simple rule, but how can users
> remember it simply? (I still have trouble remembering that wind blows FROM
> the wind direction, so perhaps I am a bad example.)

mirror-left would mirror *from* the left *to* the right.  Yeah,
there's no good way to disambiguate without getting verbose.  My
mental rule is that it *uses* the named side.

>    Second, since the name of the property is 'background-mirror' why not
> name the values 'left,' 'right,' 'top,' and 'bottom'? That allows the use of
> 'none' for the default state, which seems cleaner to me.

I'd be fine with "none" for the default state.  I prefixed the sides
with mirror- to allow unambiguous placement in the background
shorthand.  I don't want to try and come up with a way to consistently
tell whether "background: url(...) left" is specifying the
background-position or the background-mirror property.  That property
is complex enough to parse as it is.

>    Third, does the property allow multiple values? If not, how can a user
> convert a 45degree linear gradient into a diamond gradient? I would think
> mirroring right, then bottom, or whatever. Is this possible? I think it
> should be.

I haven't given any way to do that, but it would be as easy as adding
four more values, "mirror-top-left" etc.

>> The effect of this property is to divide the *box* (not the image) in
>> half either vertically (mirror-left and mirror-right) or horizontally
>> (mirror-top and mirror-bottom), then take the entire image in the
>> specified half of the current background layer and mirror it to the
>> other side.  So, for example, specifying mirror-left will split the
>> box vertically down the center, take the entire background layer on
>> the left half, and mirror it onto the right half.  "no-mirror" applies
>> no mirroring.
> How would a user perform mirroring if the reflection point were not at the
> center of the box? (Either top-to-bottom or left-to-right?) One of the use
> cases presented in the gradient discussion was mirroring, then tiling, to
> make a smooth background. Would it be necessary to insert a transparent box
> (<div>?) and size it, then tile that? And, since the box is in the
> foreground, how can it be 'background-mirror'ed?

I don't think placing the reflection point somewhere other than the
center of the box is useful enough to complicate things so that it can
be handled.  The two use-cases I came up with need it in the middle of
the box.  Of course, if you've got more examples, feel free to share.

Earlier in this thread there was discussion about the mirror property
flipping the image at the *image's* edge, so it essentially acted like
a background-repeat value.  Similarly, I don't think that's useful
enough to cater to.  You can usually just do this in your image editor

The gradient use-case you're referring to - is that basically a
repeating gradient?  I can't recall exactly what you're referring to;
a link would be helpful.

> I like the idea of this property, but would like to see more control /
> flexibility in its use.

I always want more control too.  ^_^  But I just don't see much *use*
for further control in this case.

>> In the rendering chain for backgrounds, this property is applied last,
>> after the background is sized, positioned, repeated, and otherwise
>> specified.
> Why not apply it before repetition, but after sizing and positioning? That
> handles some of the problems mentioned above? (Of course, you probably
> already have a very good reason which I have not considered.)

Two reasons.  One, it seems useful to be able to mirror a tiled image
(in the second use-case in my email the 'flair' could be a tiled image
rather than a single largish image).  Two, in my mind there are
basically three phases of background creation - setup, painting, then
manipulation.  Properties like -origin and -clip are part of setup
(they create the layer, align coordinates, etc.), properties like
-position and -repeat are painting (they take the provided image and
paint it onto the layer), and then finally -mirror would manipulate
the layer itself.

This isn't strictly necessary.  For example, symmetrical gradients can
also be created by using background-size to drop it to half
width/height and mirror as a painting operation (doubles the image,
flipped over the specified side).  But that's a bit more complex, and
wouldn't allow the second use-case I highlighted.

Received on Saturday, 29 August 2009 21:20:12 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:38 UTC