views:

71

answers:

1

Hi, I need some advice on css and styles, is not an easy question to ask,

I'm on the way to develop a project that's going to be in a few languages, I know how to manage the dictionaries, at least for now, but I was with a bigger issue ...

The page it's going to be on english, and also japanese and hebrew, they have a different style like they watch and read from right to left in some pages.

How can I manage this? I was thinking on using templates, but is not that easy to do that, the other option was doing it again.

There is some way to work with css to invert the view, like the first button on the right and the logo, and so on?

Thanks and sorry for my english.

+3  A: 

Try specifying <html dir="rtl"> in your markup for the languages that do need right to left support. You can probably make a mapping of all the languages ( keys ) and the directions ( values ). Then based on the language, specify the direction for the html element.

I would read: http://www.w3.org/International/tutorials/bidi-xhtml/

If for some reason you need left to right on a certain element, just specify the dir attribute on it: <div dir="ltr"></div>

In addition you can probably set a class on the body or html element depending on the direction. And based on that, you can either, for example float things right or left if you need to..

body #foo { float: left; }
body.right-to-left div#foo { float:right; }
meder
have you try this out on a big page? how does it behave specially with with ie :S
Saikios
Try `javascript:alert( $('html').attr('dir', 'rtl') )` in your address bar, in stackoverflow or any site with jQuery.
meder
It seems to work fine in IE. It transforms the entire page's direction magically. Though I'm sure there are IE specific edge case bugs, but this is a start...
meder