JavaScript is a client script language executed by browsers and don’t have standard i18n features.
The following are general points and major library internationalization issues.
*About JSON i18n without jQuery, refer to here.
Locale, Format, and Time Zone
The following are general points of JavaScript internationalization.
About .NET Ajax Library, jQuery, and other libraries, refer to each information resources.
- User Locale (language and region) Detection
For switching format and messages corresponding to users’ languages and regions, you need to detect users’ locales (language and region information).The general programming language such as Java and PHP have the functions to get these information, but JavaScript don’t have equivalent features.In general JavaScript programming, user languages are detected by user browser language information,for example, whether one’s Firefox is English version or Japanese.You should note that this information is, in most of browsers, not a language information set in the preference screen.
The following is a simple code to get a language code from browser language information.
function wwnaviGetLang(){
return (navigator.userLanguage||navigator.browserLanguage||navigator.language).substr(0,2);
}
This code means the user who uses Japanese Firefox is supposed to use Japanese.
You should note that OS language settings and language parameters in HTTP request to servers are not reflected.
The regions, in some cases, are set in the third and the following characters in the code above, but it’s not guaranteed.
In other ways, you can get the representative region by time difference from UTC, but this is not exact one.
*If you want to reflect browser language settings, you can use a jQuery library detecting HTTP request language accessing to a remote host (aware of browser language switching),
named jQuery-Browser-Language.
The following is a sample code using that library.
$.browserLanguage(function( language , acceptHeader ){
var l = acceptHeader; l = l.substring(0,2);
alert(l); // this will return ‘en’, ‘ja’… parsing HTTP request headers,
// the same values as browser language settings.
});
- Format Of Date And Currency
Java, PHP and other popular programming languages have the functions and classes to format data corresponding to locales, but JavaScript doesn’t have such functions.If you want to switch the format based on user language and regions, you have to create such functions by your own.Programming these process for all languages is tough, but the popular libraries like .NET Ajax and jQuery have common functions for that kind of process.(*jQuery has a Glob, a library for multilingual date and currency.)We recommend you to check if the codes of date and currency formatting don’t use fixed format and use the libraries above if its switching is required.
About format, refer to String Format and Culture Specific Expressions.
- User Time Zone Detection
JavaScript doesn’t have functions to get time zone, but has a functions to get time difference between UTC (Universal Time, Coordinated) and a client PC).This enables you to convert the common time in the server to client PC time,and you can detect the representative user regions by this time difference too.The following code is to get the time difference between UTC and client PCs by hours.
function getTzOff() {
var date = new Date();
return tzoff = ( date.getHours() – date.getUTCHours() + 24 ) % 24;
}
You can expect user representative regions in JavaScript by creating the following mapped data between time difference and regions.
0=GB
1=IT
2=FI
3=RU
4=AE
5=PK
6=BD
7=ID
8=PH
9=JP
10=AU
11=NC
12=NZ
13=TO
14=TO
15=US
16=US
17=US
18=US
19=US
20=CL
21=BR
22=BR
23=GL
(If you change the country codes to time zone IDs above,
you can expect user representative time zones too.)
*You have to note that one time difference has several different regions.
In actual cases, you should create preferences for users to set their own regions later.
Internationalization By jQuery
This section describes resource management using Java properties file by jQuery library, jquery.i18n.properties.
- Resource File (property file) Creation
Externalize embedded strings in JS files into property files(.properties).About property file creation, refer to Java Internationalization Programming – Message.
- Load jQuery Library
Load necessary JS files (jquery.min.js、jquery.i18n.properties.js).The loading has two styles described below.
A. Include in HTMLs which use JS files. (standard style)
<head>
…
<script src=”js/jquery.min.js” type=”text/javascript”></script>
<script src=”js/jquery.i18n.properties.js” type=”text/javascript”></script>
…
*You have to include in all HTMLs which use JS files.
B. Load in each JS dynamically.
function wwnaviHttpRequest(){
if(window.ActiveXObject){
try{
return new ActiveXObject(“Msxml2.XMLHTTP”);
}catch(e){
try {
return new ActiveXObject(“Microsoft.XMLHTTP”);
}catch(e2){
return null;
}
}
}else if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
return null;
}
}
function wwnaviLoadJs(url){
htoj = wwnaviHttpRequest();
htoj.open(“GET”, url, false);
htoj.send(null);
return htoj.responseText;
}
eval(wwnaviLoadJs(‘wwnaviRs/jquery.min.js’));
eval(wwnaviLoadJs(‘wwnaviRs/jquery.i18n.properties.js’));
*Loading necessary JS files by synchronized communication(*1) and execute them.
… (JS codes)
(*1)By desynchronized communication, the code will be executed before its loading gets finished
and the execution will be failed.
*This style will increase code in each JS file, but you don’t have to modify the source HTMLs. wwnavi takes this style by default to achieve the automatic modification.
- Write Initializing Code
After the loading above, write the code of setting property file location, name and language.
jQuery.i18n.properties({name:’wwnaviBundle(*1)’,path:’wwnaviRs(*2)/’,mode:’both’,
language:wwnaviGetLang()(*3),callback:function(){}});
(*1)Property file name (base name)
(*2)Property file path
(*3)Target language code (e.g. ‘en’ or ‘ja’), specified by the following function to get browser language in this case.
function wwnaviGetLang(){
return (navigator.userLanguage||navigator.browserLanguage||navigator.language).substr(0,2);
}
*If you want to use browser language setting values, you can use jQuery-Browser-Language.
This can parse the HTTP request headers accessing to a remote host.
The following is a initializing code using that library (aware of browser language settings).
$.browserLanguage(function( language , acceptHeader ){
var l = acceptHeader; l = l.substring(0,2);
jQuery.i18n.properties({name:’wwnaviBundle’,path:’wwnaviRs/’,mode:’both’,language:l,callback:function(){}});
});
*About browser language detection, refer to Locale, Format, and Time Zone.
- Write Message Loading Functions
Replace the string literals with the functions to load messages.
var msg1 = jQuery.i18n.prop(“sample1_1(*1)”);
(*1)The keys in the property files created in step 1.
- Locate .properties files
Put the .properties files in the location specified in the initializing code.The file name has the following rule.
base name(e.g. “wwnaviBundle”) + “_” + language code(e.g. “ja”)
The file with base name only is the default resource. if the corresponding language file exists, it will be loaded.
You can switch the language only by adding other language resources described below.
../wwnaviRs/wwnaviBundle.properties … English (default)
../wwnaviRs/wwnaviBundle_ja.properties … Japanese
../wwnaviRs/wwnaviBundle_ko.properties … Korean
These process can be checked with JavaScript string externalization samples in World Wide Navi.
Internationalization By gettext
The samples of JavaScript gettext are available in Here.
For C programming gettext, refer to Message Handling with gettext.
Internationalization By NET Ajax Library
For .NET Ajax Library, refer to Here.
*Original Source:
Software Internationalization Tool World Wide Navi, JavaScript Internationalization Programming
Recent Comments