directional images

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

Received on Monday, 1 November 2010 00:38:48 UTC