Re: directional images

As was mentioned during the CSS face-to-face at TPAC, the declarative
(ltr|rtl) version is indeed better than the instructive (rtlflip).
Furthermore, we probably want similar keyword(s?) to deal with writing mode,
for the required rotation(s?). I am not familiar enough with the
requirements of vertical text, so I would not want to spec that. Tab?

As was also mentioned, this does not address similar flipping/rotation for
<img> elements, since that should already be available, with authorsdefining
classes like this (and similar ones for writing mode):

.flip-in-rtl:rtl {
  transform:scaleX(-1);
}

.flip-in-ltr:ltr {
  transform:scaleX(-1);
}

Then, the HTML can simply say <img class="flip-in-rtl" ...>

Now, for a crazy idea: could the default stylesheet define such classes, so
they have well-known names and don't have to be done again and again by
authors? (I am not pushing the names or any other detail I scribbled in the
code above, just the idea itself.)

Aharon

On Sun, Oct 31, 2010 at 9:27 PM, Aharon (Vladimir) Lanin
<aharon@google.com>wrote:

> [+public-i18n-bidi@]
>
>
> On Sun, Oct 31, 2010 at 8: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 <http://dev.w3.org/csswg/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.
>>
>> Aharon Lanin
>>
>
>