Best practices for internationalization on the web

In today’s fast moving world, an intention of building everything that is accessible over the Internet has given rise to cut-throat competition. This often results in a website that lacks some useful and important aspect of Web standards.
Here, I’m not talking about some optional fancy features or something that will add ‘wow factor’ to your site, but something that will definitely distinguish your site and help it to stand apart from the crowd.
IWG – Internationalization Working Group (One of the W3C working groups) is entrusted with the goal of ensuring that the web should embrace different languages, writing systems, character codes and local conventions.

1. Internationalization is a necessity, not a nicety

Sometimes we omit W3C recommendations just because we think that it is merely for a decorative purpose. It wouldn’t be fair if I don’t mention how hard W3C is working to make the web for all.
You should always mention lang attribute in your HTML tag to declare the default language of the overall document. If your page contains contents in a different language then add lang attribute to an element wrapping them.
Example from W3C-
Not recommended

<a lang="es" title="Spanish" href="qa-html-language-declarations.es">Español</a>

Recommended

<span title="Spanish"><a lang="es" href="qa-html-language declarations.es"> Español </a></span>

IANA Language Subtag Registry has all the lang attribute value you need.

2. Why should I care about Internationalization?

Oh! So you hate putting extra efforts to care about Internationalization and you still want to call your website global?
Your hate will soon be transformed into greed when you will come to know the benefits as described below:

1. Search Engine

   The major search engines have automatic language detection, but internal markup provides extra information that will improve search engine results. (We all strive for this).

2. Spelling and Grammar Checkers

   A browser that takes into account the language of the content, improves user experience and respects language culture when it comes to spelling and grammar checkers.
   The best practice for textarea or contenteditable element(s) is to have lang attribute. See #1 for example.

3. Screen Readers

   Assistive technologies need to know whether they can produce output from the text or if they need to adjust a setting in order to process the contents.

3. Things to Keep in Mind

1. Fonts

   One font size is not suitable for every language. The :lang pseudo-class selector is used to control fonts on the document when there is the change in the language of the document.

   
   body {
     font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
   }
   :lang(ar) {
     font-family: "Traditional Arabic", "Al Bayan", serif;
   }
   :lang(ta) {
     font-family: Latha, "Tamil MN", serif;
     font-size: 120%;
   }
   

   Let’s take the example of Hebrew web page. You can’t use Time New Roman font for Hebrew web page. It will kill the aesthetic value of language in terms of letter spacing, line height, and quality of characters, et cetera.
   In such situations, you need to use a font that has a language-specific design.

2. Writing Direction

   Some languages such as Arabic or Hebrew start from right to left which requires changes in writing direction. To achieve the correct writing direction, you can either use dir attribute of HTML or direction property of CSS.

   <p dir="LTR">He said "שלם" (shalom) to me.</p>

   There are much more specific scripting styles of a language and it’s not possible to cover them all in a single article. My suggestion would be to dig in the demand of your language script on W3C and incorporate it.

4.  A Little Fun with CSS

I have setup a basic demo on codepen.io to display how you can style a web page based on the language preference of the user.
HTML Markup

<div lang="it" class="lang-example">

CSS Styling

div::after {
  background: #ccc;
  padding: 10px;
  display: inline-block;
  border-radius: 3px;
}
:lang(en)::after {
  content: 'See, you can control many things with :lang pesudo class selector. Isn\'t it cool?';
}
:lang(it)::after {
  content: 'Vedi, è possibile controllare molte cose con : lang pesudo selettore di classe . Non è cool ?';
}
div::before {
  background: #273179;
  color: #fff;
  padding: 10px;
  border-radius: 50%;
  font-weight: 600;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  margin-right: 5px;
}
div::before {
  content: attr(lang);
}
:lang(it)::before {
  background: #009246;
}

Final words

To conclude, we have been able to appreciate that the use of Internationalization is much more than just a decorative piece of styling element. The purpose of the article is to spread awareness about Internationalization and best practices recommended by W3C.