Change the font based on language CSS

Please check this code; I am trying to change the font and text-align based on language :

The style

<style> 
  .quotebod { 
    padding: 10px 10px 10px 10px; 
    line-height: 22px; 
    font-size: 20px; 
  }

  :lang(ar) { 
    text-align:right; 
    font-family:'Droid Arabic Kufi'; 
  }

  .quotebod:lang(ar) { 
    padding: 10px 10px 10px 10px; 
    line-height: 30px; 
    font-size: 20px; 
    text-align:right; 
    font-family:'Droid Arabic Kufi'; 
  }</style>

<body><p class="quotebod">{Quote}</p></body>

**{Quote}: a tumblr variable but it's text too **

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.