multilingual websites and rtl direction - best practices [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 5 years ago.

Improve this 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

what we do is declare some parameters in php like :

SIDE : right
OPOSIDE : left
DIR : rtl
OPODIR : ltr

for every site languages.

and we deal with only one css file and one template with divs, we add to css or template file replacement place holder

like :

float : {SIDE}
...

and we generate a real css file with php (replacements all what need to be replace), and the site take the css file that belong to him .

now you can do it with css framework like : LESS , BLUEPRINT , XCC

Answer 2

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 3

From official W3C:

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

Answer 4

So long as you don't specify text direction = ltr anywhere in your CSS, setting it in the body class should be enough in terms of CSS issues.

Some things to consider. Text in images makes localization more time consuming in terms of editing images, getting translations, etc. While setting text properties to rtl is rather easy, re-creating an image is more difficult. Keep in mind that rtl language users read in the opposite direction, so menus that appear on the right in ltr languages should appear on the left in rtl languages.

Tickers that move in one direction in ltr langauges move in the opposite in rtl ones.