Can CSS choose a different default font and size depending on Language

Question

I have the following CSS fragment:

INPUT{ font-family: Raavi; font-size: 14px;}

Which works fine when the textbox contains some Punjabi script like this: ਪੰਜਾਬੀ

But the user might enter English instead, and I would rather use the Verdana font with a different size, since the English letters in the Raavi font are real funky and the size is wrong.

So my question could be stated as:

• Is there any type of conditional font-family and size selection within CSS based on the input
• Is there anyway for CSS to know about the input language?

So I could create the following PSEUDO_CSS:

INPUT{ EN-font-family: Verdana; EN-font-size: 12px; PA-font-family; Raavi; EN-font-size: 14px;}

or

INPUT.EN{ font-family: Verdana; font-size: 12px;}
INPUT.PA{ font-family: Raavi; font-size: 14px;}

Answer 1

A pure CSS solution might be as easy as:

input[lang=en] {
  font-family:Verdana;
  font-size:12px;
}

input[lang=pa] {
  font-family:Raavi;
  font-size:14px;
}

But it's still up to you to set the lang attribute of the input element.

Unfortunately, as with most fancy CSS features, attribute selectors are not 100% working across the array of browsers today. Your best bet in my opinion is to use a class per language and assign it to the input element.

Update:

Per your request, here's an example of a naive way to do it with vanilla JavaScript. There are certainly improvements to be made, but this "works".

<style type="text/css">
  .lang-en {
    font-family:Verdana;
    font-size:12px;
  }

  .lang-pa {
    font-family:Raavi;
    font-size:14px;
  }
</style>

<form>
  <input type="text" onkeyup="assignLanguage(this);" />
</form>

<script type="text/javascript">
  function assignLanguage(inputElement) {
    var firstGlyph = inputElement.value.charCodeAt(0);

    if((firstGlyph >= 65 && firstGlyph <= 90) || (firstGlyph >= 97 && firstGlyph <= 122)) {
      inputElement.setAttribute('lang', 'en');
      inputElement.setAttribute('xml:lang', 'en');
      inputElement.setAttribute('class', 'lang-en');
    } else {
      inputElement.setAttribute('lang', 'pa');
      inputElement.setAttribute('xml:lang', 'pa');
      inputElement.setAttribute('class', 'lang-pa');
    }
  }
</script>

This example fires after a character has been typed. It then checks if it falls between a range considered "English" and assigns attributes accordingly. It sets the lang, xml:lang, and class attributes.

Answer 2

How could CSS know about the input language?

I'm afraid the only solution is to find a unicode font which looks pretty for both character sets. Which is far from perfect if your remote reader has not installed it. Maybe Arial Unicode MS.

Answer 3

input { font-family: Verdana, Raavi, sans-serif; font-size: 14px;}

This should work for your purposes:

• If the text is English, both fonts should contain the glyphs, and Verdana will be preferred
• If the text is Punjabi, Verdana should not contain the glyphs, so the browser should fall back to Raavi

I'm not positive if all browsers will behave correctly, but that's what they should do according to the CSS spec.

Answer 4

The only reliable solution for now is to list the fonts in the desired order, as Miles indicated.

Hopefully the (correct) solution indicated by Zack might be properly supported by more browsers.

But even then it will be your responsibility to tag the various sections with the proper lang attribute.

Nothing can reliably detect the language of any text.

Answer 5

It is common practice when maintaining multi-lingual websites to use separate CSS files for each language. This is desirable because you will need to adjust more than the font. You will often need to adjust spacing to match the length of strings in the language. Also, you may need to adjust some of the basic formatting of the page in order to make it more natural to users of the language.

The robust answer is to internationalize and not to just settle for a different font because eventually you will find that font selection will be insufficient.