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-
<a lang="es" title="Spanish" href="qa-html-language-declarations.es">Español</a>
<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:
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).
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
contenteditableelement(s) is to have lang attribute. See #1 for example.
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
One font size is not suitable for every language. The
:langpseudo-class selector is used to control fonts on the document when there is the change in the language of the document.
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-family: "Traditional Arabic", "Al Bayan", serif;
font-family: Latha, "Tamil MN", serif;
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.
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
dirattribute of HTML or
directionproperty 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.
<div lang="it" class="lang-example">
content: 'See, you can control many things with :lang pesudo class selector. Isn\'t it cool?';
content: 'Vedi, è possibile controllare molte cose con : lang pesudo selettore di classe . Non è cool ?';
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.