Internationalization(i18n) of Web Page

  • 274 views
Uploaded on

Introduce how to use Butterfat i18n JavaScript library to do internationalization of web page.

Introduce how to use Butterfat i18n JavaScript library to do internationalization of web page.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
274
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Internationalization (i18n) of Web Page William.L wiliwe@gmail.com 2014-04-28
  • 2. Index Localization(l10n) & Internationalization(i18n)................................................................................................ 3 Butterfat Internationalization (b28n) Project.................................................................................................... 4 Usage of b28n JavaScript Library....................................................................................................................... 5 Testing b28n........................................................................................................................................................... 7
  • 3. 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.
  • 4. 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
  • 5. 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");
  • 6. 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>
  • 7. 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.
  • 8. 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.