CSS Driven Internationalization using Better-DOM: Your Way to Tackle Internationalization

If you wish to read a website as a user, you wish for that website to be in a language you can read. For most English speaking countries, the website should be in the English language. But, what happens if the website is targeting cross lingual countries?

For a long time developers have been working on solving the issue of internationalization. There is a developed standard of using new tags that add Javascript support plugins to read the different languages. But, this method of using tags and JS support makes the whole process of internationalization complicated. There is the other option of building a internationalization solution from the beginning using multitudes of APIs and plugins from JavaScript.

Here we will talk about a third solution, which removes complications and is considerably easy. We will address the main issues that occur when using the first two solutions, and how this method of using Better-DOM aims at solving that problem.

How the API & Plugin Solution Works?

Before moving on to understand the Better-DOM solution that is provided, let’s try and understand how the API solution works. There are three major steps that are considered when working out the API solution.

• First step is to register a localized string using key and language functions
• Now associate a localized string to a particular element within the function
• Now allow the function to change the language

Most common example is of using validator plugin from the JQuery tools. This plugin allows localization of validation related errors using JavaScript. The key functions use CSS selectors plugin in JQuery. In order to declare error messages you will need to use $.tools.validator.localize method.

In order to change the default language, you will need to use lang configuration option in JavaScript.

Limitations to the Method

As with any method, there are obvious limitations to this method:

• In case the language of the page you have just visited is set to any language other than the default language, then you will have to use the function call to set it back to default language. Every time you want to change the language on the web page, you will need to use the function call
• In case you want to change the language on the web page dynamically, you will need to call the particular function once. After that you will need to introduce DOM of the related element and update that. You will need to perform this everytime you want to change the function dynamically which means you will add that many function calls and DOMS
• Each plugin that you insert into the program will call in their own APIs staging an increase in the number of APIs

This simply means the whole process would be long, and complicated. This way the loading time will increase, and you will face technical issues on the website.

Using: LANG Pseudo Class to Change Languages

 The: Lang pseudo class from CSS2 is how you will be able to change the default language dynamically.

For two different languages, using the pseudo class, you can use different quotations. This way you can install two different language, change between them using the quotation class, and not complicate the programming structure.

:lang(fr) > q { quotes: '« ' ' »' }

:lang(de) > q { quotes: '»' '«' '\2039' '\203A' }

This is a classic example of how quotes can help change the language of the website dynamically.

[lang=fr] and :lang pseudo are two ways of representing different languages. But, they both instill differently. Using :lang pseudo is safer compared to [lang=fr] because in [lang=fr] the elements with lang component will be compared while in case of :lang pseudo every element of the language will be compared thus showing complete content in the language selected.

Though quotation mark is an easy way of selecting, it cannot really be used in a complex multi language environment. It is meant for small pages and not large websites.

Using CSS instead of Quotations

The other method of changing languages dynamically can be done using CSS2 pseudo elements instead of CSS2 pseudo classes. IE8 has the issue of not being able to recognize syntax that uses double colon. This has been fixed with the upgraded version of IE i.e. IE9

CSS2 has elements namely: before and: after which can be used to change the language codes. With this function, you can authorize which content should come before and which content should come after the element included in innerHTML.  There are different content values which include: text string, image, counter and attribute values. You can change the inner content, and in some cases the representation of the content using this before and after value.

A simple example would be “hello world” without inner content as shown below.

#hello::before {

content: "Hello";

}

#hello:lang(de)::before {

content: "Hallo";

}

#hello:lang(ru)::before {

content: "??????";

}

Using attr Function instead of CSS

When using CSS functions, you tend to use just too much of CSS script. This can cause overloading of the syntax, and ultimately cause loading to happen slowly on your website. There is another way of tackling this situation. It is to use attr function to read the language specific data present in localized string. The basic advantage of doing this would be reduction in the amount of CSS elements included in the data. You can use generic CSS rules while putting custom specific data into your language strings.

A brilliant example of that would be as follows

<p id="hello" data-18n="Hello" data-i18n-de="Hallo" data-i18n-ru="??????"><p>

This simply means you would add all the requisite elements to global data, and make the actual CSS data pretty localized.

Using a combination of attr function and CSS2, you can change the language on your website dynamically.

Author Bio:

Juned Ahmed IT consultant at IndianAppDevelopers.com – a mobile application developer company, he like to solve problems related to mobile and web app. Feel free to contact him out if you need any help.