Posted by awm on February 1, 2011 at 4:49pm
Hello there,
I apologize if this topic has already been discussed but I was unable to find what I am looking for.
I am wondering what would be the best way to implement CSS in multilingual site. I noticed some developers use classes appended by i18n module. Others switch CSS based on the language attribute. I am kind of interested in switching the CSS for every language, not only LTR and RTL. What are the pros/cons of each scenario? And How would you approach it?
Cheers
Comments
Language aware theme and smart CSS
The nature of CSS would allow you to save a lot of time by reusing large parts, while allowing you to customize aspects of the designed based on the language or text direction (LTR/RTL). Is sounds like you're interested in "switching the CSS for every language" which is certainly possible, but depending on what you mean by this one would go about it differently. Are you thinking, completely different themes (layout, style, etc) per language or, say, something that has custom style (color/images/fonts, etc) per the language?
A good practice in general is to make sure your site looks similar across each language so uses don't "get lost" traversing your site's different languages. Then do a check for the language and layover some custom CSS for that language. For example, have the css override your logo to show a special logo in that language. This would allow you to do the layout (minus RTL/LTR changes) once then tweak just what you want to change for that specific language.
Thank you for your
Thank you for your suggestions. I think we are on the same track. While I want to keep an almost identical look and feel between the languages, I do want to switch between css between languages because some languages are more wordy than others, and require additional/different styling.For instance a sentence in English that has 100 characters, could be translated into a 50 character sentence in another language. So I am thinking of carefully building my css's where languages share common elements' styling (i.e. background colors/images, colors..etc) and on the language level load/override that which need to be changed(i.e. margins, paddings...)
What drupal (7) does now when you switch to an rtl language is append "-rtl" to the CSS filename/path which overrides layout element and whatever is required. I am considering the same technique. For example, loading "-es" css file for Spanish.
I find the zen styles a ideal platform to build on top of because of the separation of the CSS.
Good modules use ltr and rtl
Good modules use ltr and rtl stylesheets which get turned on based on the language used (well, the direction of the language). I've followed a rule of using this functionality plus minor tweaking per language. There are certain languages that simply are small (like Hebrew) and require increasing font size for example.