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

Assuming that one of the languages doesn't include the glyphs of the other, you should be able to use font-family fallbacks. Non-english fonts sometimes include English glyphs, so set English as the main language and Arabic as the fallback. When the text is rendering, it will use the English font, and when it encounters a glyph that doesn't exist in the English font (ie any Arabic letter), it will use the Arabic font instead.

Something like this:

@font-face {
  font-family: 'your_arabic_font';
  src: url('../fonts/arabic_font.ttf');
}

@font-face {
  font-family: 'your_english_font';
  src: url('../fonts/english_font.ttf') format("opentype");
}

p {
  font-family: 'your_english_font', fallback, 'your_arabic_font';
}

Hope that helps.

Answer 2

below function will wrap the different languages with in a span create .en and .ar css classes with respective font

function formatString(string) {
    var output = "<span class='en'>";
    var ar_start = parseInt("0x00600", 16);
    var ar_end = parseInt("0x006FF", 16);
    var currentLang = "en";
    for (var i=0; i<string.length; i++){
        if (string.charAt(i) != " "){
            var code = string.charCodeAt(i);
            if (code > ar_start && code < ar_end){
                if (currentLang != "ar"){
                    currentLang = "ar";
                    output += "</span><span class='ar'>"
                }
                }else{
                    if (currentLang != "en"){
                        currentLang = "en";
                        output += "</span><span class='en'>"
                    }
                }
            }
            output += string.charAt(i);
        }
    }

    return (output);
}

Answer 3

If you are using UTF-8 encoding, the contents should come out in the correct character encoding, but will still be using the same font.

You'd need to assign a CSS class to the elements containing the Arabic. CSS cannot detect this by itself.

You could do this using JavaScript to perform this task at load-time be inspecting elements and determining the character range used.

Answer 4

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

Answer 5

It is not possible to set different fonts for different languages without distinguishing pieces of text by language at the markup level. You would normally use <span> tags with a class attribute or a lang attribute or both. The lang attribute is the logical choice, whereas styling works somewhat more reliably when using class (since class selectors are supported by all CSS-enabled browsers).

Note that you may well need such markup for other purposes as well. In the case of Arabic text on dominantly English pages, it’s usually best to use bdi markup together with lang=ar and dir=rtl attributes as well as bdi { unicode-bidi: embed } in CSS, to deal with directionality. (In your message, the Arabic text has the period misplaced, at the start, i.e. on the right, due to directionality issues.)

It is possible to use client-side code that runs some language-guessing program and modifies the DOM accordingly, but this is unreliable and somewhat complicated.

As a rule, all copy text in a document should be in the same font. This can be difficult to handle (there is no truly all-encompassing font that one could successfully use on web pages), and some languages may require special fonts in practice. But there are several reasonable fonts that cover both English and Arabic, for example.