Stylize text to use different fonts for different languages?

Question

Is there a way to stylize text on an HTML page such that it automatically uses a different font for different languages? My website uses both English and Arabic. I\'d like t

Answer 1

Jukka is right, you cannot distinguish between languages automatically. You might need to set lang attribute where appropriate. You have these options:

• Use CSS2 :lang pseudo-selector;
• Use CSS3 :ltr or :rtl pseudo-selectors to set the font based on text directionality (not necessary the best idea, actually);
• Use CSS3 :script pseudo-selector. From what I see, you are probably looking for this one, actually.

The code snippet for the first solution goes like this:

body {
  font-family:Palatino,serif;
}

:lang(ar) {
  font-family: "Traditional Arabic",serif;
}

For the second option, I already said it is not such a great idea. This is not, because many languages are written either Left-To-Right or Right-To-Left. You surely don't want to use "Traditional Arabic" font for Hebrew text. I mentioned this option, because it can help you solve other problems.

For the last one:

:script(Arab) {
  font-family: "Traditional Arabic",serif;
}

External links

• W3C i18n article on lang selector
• Gunnar Bittersmann presentation from Multilingual Web Workshop in Limerick - that's where these code snippets come from (I could easily create them on my own but decided to consult an expert).