Re: Mirror as background property

I've given this topic some more thought, and come up with two primary
use-cases for this feature, plus a possible interesting hack (that
should probably be addressed elsewhere, but would work with this).
These use-cases have led me to a concrete proposal that I think
introduces the minimal amount of complexity while remaining very
useful.

Use Case 1 - Symmetrical Gradients
----------------------------------
In my linear-gradient proposal it became necessary to allow authors to
mix unit types when specifying color-stops, particularly mixing
lengths and percentages.  However, this also required adding rules to
resolve positioning/ordering conflicts, and these rules make it
difficult/impossible to ensure that a gradient intended to b
left-right or top-bottom symmetrical remains so.  For example, the
value "linear-gradient(left, blue 0, aqua 20px, white 20%, white 80%,
aqua calc(100% - 20px), blue 100%)" produces a symmetrical image as
long as the box is at least 100px wide, but as soon as it drops below
that width things go wonky - for example, if the box is 80px wide the
first aqua wins over the first white, and both sit at 20px, while the
second white wins over the second aqua, and both sit at 64px (rather
than 60px, which would be symmetrical).

A mirror feature would allow you to guarantee that your gradient
remains symmetrical at all sizes by just flipping whatever appears on
the left half onto the right half.  Tangentially, it would also make
symmetrical gradients much simpler to specify - you could write the
above as just "linear-gradient(left, blue, aqua 20px, white 20%)" and
let the mirroring take care of the right half completely.

Use Case 2 - Top/Bottom or Left/Right Symmetrical Flair
-------------------------------------------------------
When creating a page like a blog post or similar, it's fairly common
to have some short, wide image 'framing' the top.  This might be a
fleur-de-lis, vines, or just stylized curves.  This is easily done
just by specifying it as a background and a bit of padding-top to keep
the text away.  However, it may also be desirable to have the image
vertically flipped and present at the bottom of the article, enclosing
the text.  Currently this is only possible by using a wrapper element
to hold the additional background, but in the future we'll be able to
rely on multiple-backgrounds or border-image to style this properly.
However, neither of these are ideal.  Border-image is overly complex
for such a simple case, and multiple backgrounds just suck in general
(they're the least bad solution to the general problem) and require
you to create and manage two separate images.

A mirror feature would make this trivial.  Specify a single
background, mirror it, and apply proper padding to top and bottom.
This would work similarly for a symmetrical left/right image flanking
an article.


Maybe Use Case? - Turn a gradient into an arrow
-----------------------------------------------
Using an angle gradient and mirroring it can produce an interesting
'arrow' effect pointing in any direction.  Ideally this would be
produced by a diamond gradient, either in SVG or specified as some
variant of radial-gradient, but this would be a fairly easy way to
produce the effect.



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.

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.

In the rendering chain for backgrounds, this property is applied last,
after the background is sized, positioned, repeated, and otherwise
specified.

Thoughts?

~TJ

Received on Saturday, 29 August 2009 18:08:08 UTC