Re: directional images

On Sun, Oct 31, 2010 at 5:37 PM, Aharon (Vladimir) Lanin
<aharon@google.com> wrote:
> The following is a proposal for a small addition to CSS3 Images in order to
> make it easier to build web apps that support both LTR and RTL interfaces.
> For use cases and discussion,
> see http://www.w3.org/International/docs/html-bidi-requirements/#image-flip.
> Expand the syntax of each of the possible ways that an <image> can be
> specified in CSS3 Images, e.g. <url>, <image-list>, and <gradient>, by
> allowing a new keyword: rtlflip. Examples would be:
>
> background-image: linear-gradient(45deg, white, black) rtlflip
> list-style-image: url('sprite.png#xywh=10,30,60,20') rtlflip
>
> The presence of the rtlflip keyword means that the image must be
> horizontally flipped when the element's CSS direction (or, in the case of
> list-style-image, the list item marker's direction, as defined by the
> list-style-direction CSS property) is rtl.
>
> Alternatively, instead of rtlflip, the syntax could be to allow one of two
> new keywords: ltr or rtl. The presence of one of these would declare the
> image's direction and specify that the image should be horizontally flipped
> when this direction does not match the element's CSS direction (or, in the
> case of list-style-image, the list item marker's direction). Being
> declarative as opposed to instructive, this alternative is more elegant than
> rtlflip, but requires two new keywords instead of one. It is up to the CSS
> WG to choose the better syntax.

So, this thread died without any sort of conclusion on possible syntaxes.

There are a few possibilities that come to mind immediately:

1. Modify the syntax of the properties that accept images
(background-image, border-image, list-style-image, cursor) to accept a
directionality keyword which declares the directionality of the image.
 (Roughly what Aharon suggested above, but using "ltr | rtl" instead
of "rtlflip".)

2. Add a function which takes an image and declares a directionality
for it, like "imagedir(ltr | rlt, <image>)".  (What's the
directionality of an image produced from other images, like with the
cross-fade() function?)

I like the elegance of #2, because I think an image is directional or
not, regardless of where it's used, but the composition problem
troubles me.  I don't really want to have to lazily-create composed
images so we can do necessary flipping of the component images based
on the directionality of use, particularly if an image is assigned to
a variable first and only later used in a property.

So, I think #1 is the better solution here.

Thoughts from implementors?

~TJ

Received on Wednesday, 23 February 2011 19:28:17 UTC