multilingual websites and rtl direction - best practices [closed]

Question

Could you share any tips for supporting rtl direction in multilingual websites?

Apart from the text direction, should there be any changes, for instance, to the menus mark-up? The rtl CSS should be included in a separate file (like "layout-rtl.css") or a "rtl" class should be added to the body tag? I would like to know stuff like that.

I found a few tips here, but I would really appreciate someone's advice at first hand (someone that has already launched a website in a rtl language).

Answer 1

since I work a lot on bi-directional websites, i'm gonna tell you the best practice (form my point of view) in this, which is almost what @Haim Evgi mentioned about css pre-processors

so i made the following tools to help ease this thing, you can find more details in there..

• Bi App Sass
• Bi App Less

i'm going to demonstrate how to do this using Sass pre-processor & my tool bi-app-sass, but you can refer to the previous link for the Less version

simply the idea is to create three files (basically, they can grow as you want..)

app-ltr.scss    // ltr interface to be compiled
app-rtl.scss    // rtl interface
_app.scss       // private file where you will write your styles (won't be compiled)

in app-rtl.scss include the following

@import 'bi-app-rtl';
@import 'app';

same for the app-ltr.scss

@import 'bi-app-ltr';
@import 'app';

now all you have to do is to write your styles in _app.scss, but the only difference here, is that any property that can have right/left values you need to write them using a custom mixins as follows..

.foo {
  display: block;
  @include float(left);
  @include border-left(1px solid white);
}

once you compile them, you'll have a two different versions of your stylesheets app-rtl.css & app-ltr.css and you are done!

hope that helped :)

Answer 2

From official W3C:

• Internationalization Best Practices: Handling Right-to-left Scripts in XHTML and HTML Content