Re: Mirror as background property

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
beforehand.

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.

~TJ

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