CSS Sprites and RTL problem

[shazdeh]

To shift images sprites, we use background-position property and to change the position of the background on the element we again use background-position property. So on the RTL stylesheets it becomes impossible to use CSS Sprites, unless you know the exact width of the element (to push the image to the correct distance from top left).
This is not an issue on LTR languages because the coordinate system works from top left.
How can we solve this?

[mixxmac]

Could you check if the browser is using LTR or RTL, and use different stylesheets based on that (e.g style_ltr.css or style_rtl.css)?

[shazdeh]

That’s not the problem. I’m using WP which automatically includes rtl.css in RTL languages. The problem is that to define where to show the background and to define what part of the background image shown we use the same css property. Assume that you want to show the icon on the right hand side of your element. It’s easy with css:

background-position: right center;

Now think that you have an image sprite and you want to show that on the right hand side. How do you do it?

[TheLeggett]

As far as I know, there is no way to set the coordinates to begin in the upper right corner using only CSS.

However, if you have enough information about the dimensions of the different objects, you might be able to do something like assigning the parent container “position: relative”, and then using “position: absolute; top: 0; right: 0;” on a secondary inner element. If you give this extra element the width/height of the part of the sprite you want to use, you could then use background position.

[Author]

Posts