styling bidirectional websites CSS best practice?_问答_开发者

styling bidirectional websites CSS best practice?

开发者 https://www.devze.com 2023-03-15 17:28 出处：网络

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).

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 开发者_JS百科<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

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.

I am not really sure why you need specific classes for Arabic texts. OK, you might want to modify fonts (as in font-family or font-size) but not much more than that. To switch directionality, you should use dir attribute (that is W3C recommendation).

As for styling elements, if you really need to modify styles for each element, you might want to use universal selector:

* { font-family: Verdana; }

For elements in given language (if you remember to use lang attribute), you can also use universal selector in conjunction with lang pseudo-selector (beware that some web browsers does not seem to support it, although it should be supported since CSS2):