Internationalization(i18n) of Web Page

Internationalization (i18n)
of Web Page
William.L
wiliwe@gmail.com
2014-04-28

Index
Localization(l10n) & Internationalization(i18n)................................................................................................ 3
Butterfat Internationalization (b28n) Project.................................................................................................... 4
Usage of b28n JavaScript Library....................................................................................................................... 5
Testing b28n........................................................................................................................................................... 7

Localization(l10n) & Internationalization(i18n)
L10N is the act of translation of messages from one language to another to meet cultural or other requirements
of a target market or a locale.
I18N is the act of making the code be able to use l10n easily for users that vary in culture, region, or language.

Butterfat Internationalization (b28n) Project
A project created by Butterfat to ease i18n work on web page. Internationalization is implemented in a
JavaScript library(b28n.js) that reads XML files to do the translations.
Project Site (Unavailable Now)
http://www.butterfat.net/wiki/Projects/b28n
b28n JavaScript file download site:
https://mmbase.org/CMSContainer/tags/v1_2_1/CMSContainer/cmsc/utilities/src/webapp/editors/js/Butterfat/b28n.js

Usage of b28n JavaScript Library
1. For each language, create a file named <domain>_<lang>.xml, where lang is one of the two letter
abbreviations found on http://www.loc.gov/standards/iso639-2/langcodes.html (for instance,
messages_en.xml is a good start).
The script will first look for a cookie with the name "language", and if it is not set then it uses the browser
langague (using JavaScript Navigator object’s attributes navigator.language or
navigator.browserLanguage).
Here, creates two language table XML files, main_en.xml for English and main_tw.xml for Regular Chinese.
Its contents are as below:
Note:
PO means “Portable Object”. See http://en.wikipedia.org/wiki/Gettext for more details.
2. In the web page wants to do i18n, include b28n JavaScript library “b28n.js” using HTML <script> tag.
Ex: describe the path to “b28n.js” file.
<script type="text/javascript" src="/lang/b28n.js"></script>
3. In <header> block, put following code in <script> block
Butterlate.setTextDomain("main","lang");
, “main” is the name of <domain> to of “<domain>_<lang>.xml” file and “lang” is the location of
“<domain>_<lang>.xml” file.
3. Write a JavaScript function(name “init” for example) to be invoked when HTML body is loaded.
<body onload=” init()”>
In this function, set value of “innerHTML” HTML DOM property of elements that need to do translation as
below. The string between “_(“ and “)” symbols is the value of “msgid” defined in language file,
“<domain>_<lang>.xml”.
<po>
<message msgid="translate apply" msgstr="Switch Lang" />
<message msgid="translate chip" msgstr="Chip" />
<message msgid="translate computer" msgstr="Computer" />
<message msgid="translate program" msgstr="Program" />
</po>
<po>
<message msgid="translate apply" msgstr="切換語言" />
<message msgid="translate chip" msgstr="晶片" />
<message msgid="translate computer" msgstr="計算機" />
<message msgid="translate program" msgstr="程式" />
</po>
var e = document.getElementById("chip");
e.innerHTML = _("translate chip");
e = document.getElementById("computer");
e.innerHTML = _("translate computer");
e = document.getElementById("program");
e.innerHTML = _("translate program");

4. Design a mechanism to trigger the act setting “language” into cookie and reload current web page.
Here use button for example.
Note:
In original b28n.js, getLang() function returns current language code retrieving from web browser’s attribute
and it would return a code that let b28n.js fail to find correct language table XML file(<domain>_<lang>.xml)
when it is FIRST time to load this web page, so I modified code that it will return “en” code when there has no
“language” key in cookie.
P.S: Do not eat too much Butter or you will get to be Fat !
this.getLang = function() {
var one, two, end;
if((one=document.cookie.indexOf("language"))==-1)
return "en"; /*((navigator.language) ? navigator.language : navigator.browserLanguage).substring(0,2);
2014-04-27, William.L changed to use "en" as default language code. */
end = (document.cookie.indexOf(';',one)!=-1) ? document.cookie.indexOf(';',one) : document.cookie.length;
return unescape(document.cookie.substring(one+9,end));
};
<script>
function setLanguage()
{
var langValue = Current-Radio-Button-Value;
document.cookie = "language="+langValue+"; path=/"; /* store new chosen language type into cookie */
window.parent.location.reload(); /* Reload this web page */
}
</script>
…..
<form name="Lang">
…
<input type=”button” onclick="javascript:setLanguage()">
…
</form>

Testing b28n
O.S: MS-Windows XP/7
Web Server: Apache Win32
1. Down Apache for MS-Windows from following site, install and invoke it.
http://apache.stu.edu.tw//httpd/binaries/win32/
If Apache run normally, it could see Apache icon in Windows system tray.
In this test, Apache is installed under “E” drive, and its path will be
“E:Apache Software FoundationApache2.2”
2. Download sample code from GitHub
https://github.com/wiliwe/web-i18n-butterfat.git
Using Git tool to fork this repo:
git clone https://github.com/wiliwe/web-i18n-butterfat.git
3. Uncompress sample code to Apache Document Root.
You could see “DocumentRoot” path in Apache configuration file, httpd.conf locateing under “conf” folder
of your Apache installation path .
After uncompressing sample to Apache Document Root folder, it will be as below.

P.S :
Overwrite original index.html file built by Apache server.
4. Now, it could try to connect to Apache and see test result.
Open a web browser(here uses Google Chrome web browser for example) and enter URL http://localhost:80
to connect.
“80” in URL is the Apache web server listening port number and it could be found in Apache configuration
file, httpd.conf, search “Listen” variable to see the actual port number.
In testing web page (index.html), there has two radio buttons for choosing language.
You can invoke Developer Tool of web browser and see Cookie’s value as below figure.

Internationalization(i18n) of Web Page

Internationalization(i18n) of Web Page

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a Internationalization(i18n) of Web Page

Semelhante a Internationalization(i18n) of Web Page (20)

Mais de William Lee

Mais de William Lee (20)

Último

Último (20)

Internationalization(i18n) of Web Page