Enterprise Software

Detect foreign language support using JavaScript

If your Web site features a language with a specific character set, browser support can be tricky. See how you can use JavaScript to make sure browsers will properly display those characters.


Recently, when I was designing a Japanese Web site, I found an interesting problem during the testing phase. When the Web site was viewed through a browser with Japanese language support, everything looked great. However, if Japanese support was missing on the client computer, the results were awful. The content displaced the layout of the Web site, and Japanese kanji characters displayed as a strange set of characters. Figure A shows an example of the screen layout with and without Japanese support. To solve this problem, I had to use JavaScript to determine whether the language was supported.

Figure A


Is it supported?
To determine whether Japanese is supported in the browser, I created a JavaScript application that tests whether the user has sufficient resources to view a Japanese site. If so, the user is redirected to the Web site. If not, the user is redirected to a help page that contains language support download links and troubleshooting information.

I designed an object-oriented JavaScript API to detect Japanese language support. This API is easily modified to detect other language types, especially those that use extended character sets (such as Cyrillic and Chinese). The language detection API uses three primary functions:
  • Browser localization
  • Language component detection
  • Unicode Double-Byte character set detection

Let's take a closer look at each.

Browser localization function
JavaScript's navigator object has several properties to detect language settings, including:
  • navigator.language (Netscape - Browser Localization)
  • navigator.browserLanguage (IE-Specific - Browser Localized Language)
  • navigator.systemLanguage (IE-Specific - Windows OS - Localized Language)
  • navigator.userLanguage (IE-Specific - Windows OS - Regional Settings)

The navigatorDetect() function is designed to detect Japanese versions of Netscape or Internet Explorer. It determines whether the user has a Japanese Windows version or has localized either the browser or operating system to Japanese. The following chunk of code determines what browser and operating system the user has and adds a Boolean value to each variable:
 
functionjpDetect(){}
var uA=navigator.userAgent.toLowerCase();
var nA=navigator.appName.toLowerCase();
var majV=parseInt(navigator.appVersion);
jpDetect.prototype.IE=((uA.indexOf("msie")!=-1) && (uA.indexOf("opera")==-1));
jpDetect.prototype.IE4=(uA.indexOf("msie")!=-1);
jpDetect.prototype.IE5=((uA.indexOf("msie")!=-1) && ((majV="5")||(majV="5.5")||(majV="6")));
jpDetect.prototype.NS4=(nA.indexOf("netscape")!=-1);
jpDetect.prototype.isMac=(navigator.appVersion.indexOf("Mac")!=-1);
jpDetect.prototype.isWin=(navigator.appVersion.indexOf("Win")!=-1);

Next, default values are added to the navigator detection variables:
 
jpDetect.prototype.navigatorBrowserLanguage="false";
jpDetect.prototype.navigatorSystemLanguage="false";
jpDetect.prototype.navigatorUserLanguage="false";
jpDetect.prototype.navigatorLanguage="false";

Finally, the navigatorDetect() function reveals whether the default browser language (and Windows system language) has been set to Japanese. Each variable contains a Boolean value:
 
jpDetect.prototype.navigatorDetect=function() {
if (this.NS4){
this.navigatorLanguage=(navigator.language=="jp");}
if (this.IE4){
this.navigatorBrowserLanguage=(navigator.browserLanguage=="ja-jp");
this.navigatorSystemLanguage=(navigator.systemLanguage=="ja-jp");
this.navigatorUserLanguage=(navigator.userLanguage=="ja-jp");}}

To detect language support in other browsers, you should examine ja-jp in the client's User Agent using server-side variables.

Japanese support component detection
This functionality works only in Internet Explorer 5.0+. It does not work with Netscape and operating systems other than Windows, since it relies on the Windows registry. The comDetect() function looks for the following four components:
  • Uniscribe (built-in Japanese support for W2K/IE5.0+)
  • Language Auto-Selection (available in IE5+/IE6)
  • Japanese Text Display Support (IE5+)
  • Microsoft Global IME for Japanese (IE5+)

The Uniscribe component is integrated in Windows 2000 and provides basic Japanese language support. The Language Auto-Selection component determines whether a download prompt will appear if language support is not present. Japanese Text Display Support is a stand-alone component that can be loaded into the IE browser. If you want to add global Japanese Language support in Windows, I would recommend downloading the Microsoft Global IME (Input Method Editors).

Let's examine the component detection function in detail. First, we define two arrays: comJapanese holds the registry keys we want to check and comStatus holds a Boolean value confirming whether the component was found:
 
jpDetect.prototype.comJapanese=new Array();
jpDetect.prototype.comStatus=new Array();

Next, the comJapanese array is populated with the key values for each of the desired components. You can discover a lot more about these components by looking at the Windows registry and searching for the following keys:
 
jpDetect.prototype.comJapanese[0]="{76C19B30-F0C8-11cF-87CC-0020AFEECF20}";
jpDetect.prototype.comJapanese[1]="{01679A11-5C6C-11d1-83FF-00C04FD25153}";
jpDetect.prototype.comJapanese[2]="{3bf42070-b3b1-11d1-b5c5-0000f8051515}";
jpDetect.prototype.comJapanese[3]="{76C19B50-F0C8-11CF-87CC-0020AFEECF20}";

The comDetect() function loops through the comJapanese array and checks each component using IE's oClientCaps behavior. The result is passed into the comStatus array (which can be displayed or evaluated):
 
jpDetect.prototype.comDetect=function(){
if (this.IE5 && !(this.isMac)){
for(i=0; i<=3; i++){
this.comStatus[i]=oClientCaps.isComponentInstalled(this.comJapanese[i],"componentid");}}}

Unicode Double-Byte character set (DBCS) detection
Japanese kanji characters (also known as glyphs) differ in many ways from the standard English alphabet. The Japanese alphabet is part of the Unicode specifications, and each character is represented by Double Bytes in the Web browser. (The English alphabet is Single Byte.) We can use this unique characteristic to detect the existence of Japanese language support. For more information about Unicode and character sets, please refer to this useful Microsoft primer.

First, we set the Web page content-type to Japanese. Next, using JavaScript, we test a string containing a Japanese character. If the browser has the appropriate language support, the string length will be equal to 1 (the single Japanese character). If the browser cannot render the Japanese character, the string length will be equal to 2—the two characters (or bytes) representing the single Japanese character. Here is the code:
 
<html>
<head>
<META http-equiv=content-type content=text/html;charset=x-sjis>

We are setting the content-type to Shift-JIS. For more information about this character set, refer to this table
 
</head>
<body>
<script language="Javascript">
dbcsTest="‚ ";

The dbcsTest variable contains two characters ‚ , which represent a single Japanese character. We test the string length to find out whether Japanese language support is present:
 
if ((dbcsTest.length)==1){
document.write("Client has Japanese language support.");
}else{
document.write("Client does not have Japanese language support."); }
</script></body></html>

You can test this application by changing the language encoding on the Web page. Figure B shows what's displayed if we change the language setting to Western European.

Figure B


If we change the encoding to Japanese, we get the display shown in Figure C—assuming that Japanese language support is present.

Figure C


A caveat
If you try to change the Web page encoding, certain versions of Internet Explorer may automatically prompt the user with the question Do you want to download Japanese Language pack? Unfortunately, there is no Web-based method of turning off this feature in the browser. However, there is a workaround: You can use the JavaScript component check for Language Auto-Detection. If the component is present, you can skip the DBCS test and thus avoid having the download prompt disrupt JavaScript execution.

Editor's Picks