Re: directional images

On 02/23/2011 01:00 PM, Tab Atkins Jr. wrote:
>
> 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.

So the image() function, which is computed against 'direction' the same
way 'currentColor' is computed against 'color', represents a left-facing
arrow on this element. OK.

> 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?

Left, obviously.

> What if I just use that cross-fade() value directly in a property?

Same.

> What if I assign it to a variable and then use it?

Depends on where you use it. If you use it on an RTL element, then
the arrows face left.

~fantasai