Re: directional images

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

Received on Wednesday, 23 February 2011 21:01:27 UTC