Client-side L10n

Because my native language is Chinese, I try to find a Localization(L10n) package to translate the display from English to Chinese. There are many package found in Node.js; however, I need a standalone package can be executed only on the browsers due to reducing traffic. The final answer is webL10n. It is easy to use, and it not only can do the translation in HTML but in JavaScript. That is a total blast!

To use webL10n, the first thing must be done is set the language; for example:

1
<script type=”text/javascript”>
1
function onLocalized() {
1
2
var l10n = document.webL10n;   
l10n.setLanguage(‘zh-tw’);
1
}
1
document.webL10n.ready(onLocalized);
1
</script>

The zh-tw is the part of the path in the resource file such as data.zh-tw.properties. While the page is loaded, the language of this page will be set to the zh-tw. After that, you can use the translation in everywhere in the page.

1
var _ = document.webL10n.get;
1
console.log(_(‘magic’))

The underscore function _ is the convention while translating. So, get the underscore function, and do the translation in the place you want. The webL10n is the simplest package I have ever found.

Originally published on Medium