April 18, 2006

An Approach for Implementing Client-Side Multi-Language Support in DHTML

Filed under: Uncategorized — Anthony Park @ 7:18 pm

Shortly after the first version of MCEBrowser shipped, I started getting requests for MCEBrowser to be translated into different languages. I also had several people offer to do the translations for me. So, I decided that if this feature was so important to so many people, maybe I should devote some time to implementing it.

Being new to multi-language development, I really wasn’t sure where to start. I found tons of information online about adding multi-language support to compiled applications (Win32, .NET, Java), and even to web-based applications (ASP, Java, etc). However, I was working on an application that was almost strictly client-side HTML and JavaScript. I could not find any information about how to support multiple languages in this environment.

So, here is the solution I came up with. I decided to use spans in my HTML page to represent each text item that I wanted to be defined in a language file. Each of these spans contains the English version of the text that I want displayed. Ex:



The span id’s are defined in a separate XML file, along with the text inside of them. The English example looks like this:



This XML file is named “en-us.xml”, the language code for the US English language plus a “.xml” extension. Great! Now all of the text for the controls is defined in an XML file, but now we need a way to load it into the controls. Consider the following JavaScript function:



This function uses the “Microsoft.XMLDOM” ActiveX object to load a file from the local file system that matches the current “navigator.browserLanguage”. Once the XML file is loaded, it iterates through the elements in the XML file and loads the text in each node into the control on the current page that matches the ID as defined in the file. This function can now be called from a page onLoad function like this:



Notice that we are including the Translation.js file, which contains the loadPageTranslationData function in the head section of the page. In the onload event of the body, we are calling the loadPageTranslationData function, passing ‘selectLocationPage’ (the name of our page) as the parameter. This function will find the correct language file for the current browser language and load all of the text into our page elements.

Cool! Now, we just need translations of our English XML file to other languages. A Traditional Chinese example of the earlier English selectLocationPage might look something like this:



As new translations are added, they just need to be added to the “languages” folder under the project and the translated text will display automatically in the browser:



The result?


No Comments

No comments yet.

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.