Re: directional images

For the case you give, obviously we want a left-facing arrow before, during,
and after the transition. This would indeed happen if the composed image has
the ltr property, since the context in which it would finally be used is
rtl.

However, I thought you were going to ask something else: What happens if an
ltr image is composed with an rtl image or an image with no direction? I
would say that probably, the composition should be applied after flipping,
if any, has been applied to each component independently. However, that may
be difficult to implement, and may not be a very important use case. So,
perhaps, composition between images with different direction values should
be treated as something of an error, and result in an image with no
direction.

Aharon

On Wed, Feb 23, 2011 at 1:00 PM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> On Wed, Feb 23, 2011 at 12:42 PM, fantasai
> <fantasai.lists@inkedblade.net> wrote:
> > On 02/23/2011 11:27 AM, Tab Atkins Jr. wrote:
> >>
> >> 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?
> >
> > I'm not an implementor of this type of stuff, so you might not care about
> > my opinion, but I think adding an argument to the image() function makes
> > way more sense, given the universality of the concept.
>
> Do you have any opinion on the problem of composed images?  If I do
> something like the following:
>
> <ul dir=rtl>
>  <li>ONE</li>
> </ul>
> <style>
> ul {
>  list-style-image: image( url("right-facing-arrow.jpg"), ltr );
>  transition: list-style-image .2s;
> }
> ul:hover {
>  list-style-image: image( url("highlight-right-arrow.jpg"), ltr );
> }
> </style>
>
> Since the images are tagged as ltr, but the <ul> is rtl, they'll flip
> horizontally so the arrows face left instead.
>
> But during the transition, the used value is of list-style-image is:
>
>  cross-fade(
>    image( url("right-facing-arrow.jpg"), ltr ),
>    image( url("highlight-right-arrow.jpg"), ltr ),
>    X%
>  );
>
> Do the arrows face right or left?  What if I just use that
> cross-fade() value directly in a property?  What if I assign it to a
> variable and then use it?
>
> ~TJ
>