Can CSS Choose a Different Default Font and Size Depending on Language

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

This is addressed in CSS3, and that's not going to help for compatibility with old browsers, but it works for me when mixing Greek and Latin text with different fonts for each. Here's an example taken from the CSS Fonts Module Working Draft:

@font-face {
    font-family: BBCBengali;
    src: url(fonts/BBCBengali.ttf) format("opentype");
    unicode-range: U+00-FF, U+980-9FF;
}

The unicode-range bit is the magic key: that tells the browser to use this font-face statement only for this particular block of Unicode characters. If the browser finds characters in that range, it uses this font; for characters outside that range, it falls back to the next most specific CSS statement following the usual pattern of defaulting.

Change Font Size Based on Language

In your case the lang attribute is set on the html tag, so you could style all the elements you need based on that using the rules:

html:lang(en) h1{
    font-size: 20px;
}

html:lang(ko) h1{
    font-size: 10px;
}

Be careful, though, the the :lang pseudo-class is supported only in IE8+. Should you need support in IE7+, your best bet is going for the syntax of this type: a[lang="en"].

Assigining different font-size per each font in one font-family

You cannot set font size so that it would depend on the font family.

Instead, try and find a font that is suitable for both (or all) languages on the page. The font designer should have taken the different characteristic of different writing systems into account. Usually fonts designed for e.g. Asian languages have Latin letters, too (at least the basic Latin letters, which mostly suffice for English).

If you really want to set different font properties for different writing systems, you need to use markup that distinguishes between different languages, e.g. using lang attributes in HTML and selectors based on them in CSS. But normally the use of different fonts is a problem to be avoided, rather than a solution.

Load different font for different languages in SCSS

//If Japanese then
@font-face {
   .......
   unicode-range: 3000-303f;
}

The unicode-range CSS descriptor sets the specific range of characters to be used from a font defined by @font-face and made available for use on the current page. If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.

Change the font based on language CSS

It's quite fine to have texts in different languages in the same page. Usually in this case it's easy to determine the 'main' language of the HTML; that language should be used in lang attribute of <html> element. Next, you add lang for each element containing text written in different language.

In case when one language is LTR, and other is RTL, it's also good to specify dir attribute as well, following the same approach. For example:

<html lang="ar" dir="rtl">
  <head>
  </head>
  <body>
    <p>«فى هذا الكتاب مقارنة بين تعاليم الإسلام كما وصلت إلينا، وبين أصدق ما وصلت إليه حضارة الغرب فى أدب النفس والسلوك فى محاولة للكشف عن روعة التقارب وصدق التطابق»</p>
    <p lang="en" dir="ltr"> These are some of the words of the author, which cross them about the reason for writing this unique work</p> 
    <p>.. هذه بعض كلمات المؤلف التى عبر بها عن سبب كتابته لهذا العمل الفريد، خاصة بعد قراءته لكتاب «دع القلق وابدأ الحياة» لديل كارنيجى وقد اعتمد فى هذا العمل على جانبين رئيسين.</p>
  </body>
</html>

You can easily adjust styling of each separate element by using :lang selector. Take note that once set up on html, it'll be inherited by all the elements - unless overwritten directly.

So in the document above, p:lang(ar) selector will be applied both the first and the third paragraphs - but not to the second one.

Now to the question. Let's say we have an element that might contain text in either Arabic or English. You might've guessed already that it's not enough just to change the text itself - you'd also adjust accordingly lang attribute of that element. For example:

// here goes the code that receives the quotation
<p class="quotebod" lang="{Quote.lang}" dir="{Quote.dir}">{Quote}</p>

The hard part would be detecting the language by the quote. I suppose that's easy to do at the source, but you can do it the client-side as well by analyzing the contents of Quote - if they contain symbols from the Arabic alphabet, they're hardly in English - and vice versa.

For example, let's say we have an HTML containing different types of text in a shallow structure - each paragraph contains a block of text in either Arabic or English. Here's how we can assign lang and dir attributes accordingly:

var arabicPatt = /[\u0600-\u06ff]/;
[].forEach.call(document.getElementsByTagName('p'), function(p) {
  var lang, dir;
  if (arabicPatt.test(p.textContent)) {
    lang = 'ar'; dir = 'rtl';
  }
  else {
    lang = 'en'; dir = 'ltr';
  }
  p.setAttribute('lang', lang);
  p.setAttribute('dir', dir);
});

Demo. Note that I didn't set up text-align: right in CSS - it was done by the browser once the elements received corresponding dir value.

How to change different language to different font-size at same line without unique each container?

If you alter the text using JavaScript (since your question allowed for JavaScript), you can use CSS upon the results changed by JavaScript (which as others have said, requires adding a container).

For example :

window.onload = function () {
    // Note that the following might also be used for Japanese or Korean
    // Note also that I have not included (deprecated) compatibility characters. As 
    //   per http://www.unicode.org/reports/tr38/#BlockListing , to cover those
    //   you would need to add:
    //     1. \u3358-\u3370\u337B-\u337F\u33E0-\u33FE (e.g., immediately after "\u32CB")
    //     2. \uFA2E-\uFA6D\uFA70-\uFAD9 (e.g., immediately after "\uFA29")
    //     3. Replace \uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29 with \uF900-\uFA2D OR if you want to keep the compat. listed separately from non-compat. (though there is no need for this), add the following, e.g., before \uFA0E: \uF900-\uFA0D\uFA10\uFA12\uFA15-\uFA1E\uFA20\uFA22\uFA25\uFA26\uFA2A-\uFA2D
    //     4. Immediately before ")+\s?)+/g", add |\ud87e[\udc00-\ude1d]

    // The portion \u2E80 up to \u32CB is for punctuation and special characters like radicals,
    //  but this does not support some punctuation characters which might be reused outside of 
    //  CJK as well as in CJK.
    var chineseChars = /((?:[\u2E80-\u2E99\u2E9B-\u2EF3\u2F00-\u2FD5\u2FF0\u2FFB\u3000-\u303F\u3105-\u312D\u3190-\u31B7\u31C0-\u31E3\u3220-\u3243\u3280-\u32B0\u32C0-\u32CB\u4E00-\u9FCC\u3400-\u4DB5\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\ud840-\ud868][\udc00-\udfff]|\ud869[\udc00-\uded6\udf00-\udfff]|[\ud86a-\ud86c][\udc00-\udfff]|\ud86d[\udc00-\udf34\udf40-\udfff]|\ud86e[\udc00-\udc1d])+\s?)+/g;
    document.body.innerHTML = document.body.innerHTML.replace(
        chineseChars,
        '<span lang="zh">$1</span>'
    );
};

with your CSS:

body {font-size: 12px;} 
span:lang(zh) {font-size: 10px}

JSFiddle

My use of lang="zh" is based on an assumption that you know these to be used for Chinese as opposed to Japanese or Korean. If you do not know, you can change the span in JS to this:

'<span class="cjk">$1</span>'

and the Chinese part of the CSS to this:

span.cjk {font-size: 10px}

That won't make any assumptions about the language, only the characters.

JSFiddle

Change font based on language reactjs

I am not very familiar with i18next, but you can simply change the className of the div containing the text based on the language you are using.

//.jsx file

  <div className = {i18.language}>
    //some text goes here
  </div>

//css file
  .en{
    font-size:16px
   }
  .fr{
    font-size:12px
   }
//etc.

Change font-family with respect to language

You might try to use a global css class and relatively change font-family based on language.

On how you can achieve that, if you're using redux, it's pretty easy, every time you change language (click button or something), dispatch an action to change the state that related to the global css class.

Otherwise, you have to figure out how to store that language change to express it so that main app component can detect that change.

Can CSS Choose a Different Default Font and Size Depending on Language