W3C home > Mailing lists > Public > www-style@w3.org > February 2011

Re: directional images

From: fantasai <fantasai.lists@inkedblade.net>
Date: Wed, 23 Feb 2011 13:39:41 -0800
Message-ID: <4D657E9D.5010405@inkedblade.net>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: "Aharon (Vladimir) Lanin" <aharon@google.com>, W3C style mailing list <www-style@w3.org>
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
Received on Wednesday, 23 February 2011 21:40:18 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:37 GMT