Search code examples
htmlcsslocalizationbidirectional

styling bidirectional websites CSS best practice?

I am working on a website consists of four languages (Arabic, English, French and Spanish), (Arabic is a right-to-left language for people who don't know that).

Basically left-to-right (en, es and fr) sites will have the same layout/CSS.

in order to handle different arabic styles I am wondering between two methods:

1. specific language/direction class:

adding the following classes to html tag, and using one simple file to handle that

  • arabic <html class="ar rtl" dir="rtl">
  • english <html class="en ltr">
  • french <html class="fr ltr">
  • spanish <html class="sp ltr">

2. using separate files:

in this case I would use lets say a common.css file for all common things, and load a separate specific language/direction file (something like arabic.css or western.css)

What do you think the best option will be ?

Thanks

Solution

  • Option #2 sounds like the more manageable solution. This way you can simply load the appropriate style sheet based on the language chosen. Since it sound like the text in your webpage updates based on the language selected (ie it is not physically written out twice) two separate style sheets will allow you to modify the layout without messing with the content in the html markup. So more information on how the languages are going to be switch might help you to get better answers.