localizer.js - multilingualization in JavaScript
- 2008.02.08 Friday
- dev
I just consider internationalization on JavaScript. It should have simple and visceral interface.
For instance,
document.write(_('Hello world!'));
We can get a localized string via the function _.
The name of function, _ is used in a standard internationalization gettext.
var __Localizer = function() { this.strings = {}; this.getLocalizedString = function(str) { if (__Localizer.strings[str] && __Localizer.strings[str] != '') return __Localizer.strings[str]; return str; }; return this; } __Localizer = new __Localizer(); _ = __Localizer.getLocalizedString;
__Localizer is defined as a global object here.
To configure the list of localized strings against __Localizer.strings, the following javascript will be loaded:
__Localizer.strings = { 'Hello world!' : 'Hallo Weld!' };
The localized data script (locale/de.js) can be included in header of HTML document as follows:
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>samples - localizer</title> <script type="text/javascript" src="localizer.js"></script> <script type="text/javascript" src="locale/de.js"></script> </head>
I think it's better to consider to use lang or xml:lang attribute in html element. The following code will load localized data automatically depends on lang attribute:
var __Localizer = function() { this.strings = {}; this.getLocalizedString = function(str) { if (__Localizer.strings[str] && __Localizer.strings[str] != '') return __Localizer.strings[str]; return str; }; var path = ''; var jses = document.getElementsByTagName('script'); for (var i=0,n=jses.length;i<n;i++) { if (jses[i].src.indexOf('localizer.js') == -1) continue; path = jses[i].src.replace('localizer.js',''); break; } var html = document.getElementsByTagName('html')[0]; if (html) { var lang = html.getAttribute('xml:lang') || html.getAttribute('lang'); if (!lang) lang = 'en'; document.write(['\n<','script type="text/javascript" src="',path,'locale/',lang,'.js"></','script>'].join('')); } return this; }; __Localizer = new __Localizer(); _ = __Localizer.getLocalizedString;
We can use document.createElement to generate a script element, but document.createElement may not work under some browsers. So I use document.write instead of document.createElement.
The script is named as "localizer.js", and language data should be put into "locale/" directory as follows.
- localizer.js
- locale/
- en.js (English)
- ja.js (Japanese)
- de.js (German)
- ... any other language data
A sample HTML document looks like:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>sample - localizer.js</title> <script type="text/javascript" src="localizer.js"></script> </head> <body> <p>"Hello world!" is translated in Japanese.</p> <p>However this document is writtin in English, so it looks nothing to be changed. You can also see <a href="en.html">English page</a>.</p> <hr /> <p><script type="text/javascript"> <!-- document.write(_('Hello world!')); // --> </script></p> </body> </html>
We can see "Hello world!" in source code, however this string will be translated in Japanese because of xml:lang attribute ("ja").
If there is no resource for corrsponding language, the string won't be translated.
This script is distributed under MIT license. => Download localizer and samples.