Hello everyone,
There is a fundamental limitation of CSS's property background-position that
becomes apparent and annoying when working with RTL documents. The problem
is that when value lengths to determine the position of an image, the
position is by default calculated from the __top left__ corner of the
element. When working with RTL documents, the desired position is supposed
to work contextually, thus should be calculated from the __top right__
corner of the element.
The workaround this is to use only keyword and percentage values. Negative
values of course, do not work out since they serve a purpose in this regard.
To clarify, consider the following:
HTML (RTL document):
<ul id="navbar">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
CSS:
#navbar li {
background-image: url('cool.png');
background-repeat: no-repeat;
background-position: 4px center;
list-style-type: none;
}
Now, since the context is RTL, the background image for every list item
should appear on the right side of it, but it won't because value lengths
are caculated from the top left corner of the element.
If we used:
background-position: right center;
it will work, but we will ose fine-grained styling.
I've tried to declare a direction: rtl; on such elements but it didn't have
any effect.
Does anyone knows if CSS3 has dealt with this limitation?
Regards,
Usamah
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
