Character Conversion points »

Localizing JavaScript with JSPs

August 22, 2008, 12:41 am

Last week a friend asked an interesting web-based localization question. He surprised me with it. I wish that I had considered it before, but I had not. In my less than complete analysis of his problem, I found a solution, but I don’t know if he’ll like it. Hell, I barely like it myself, but it’s what I came up with quickly.

Here’s the question:

I want to localize a bit of JavaScript, nothing fancy now, just localized text strings. Once the JavaScript in pulled down into my browser, I don’t want to make any more trips to the server to get text. You have any idea how I can get localized strings in my JavaScript?

So here are a couple options:

  1. Create a localized copy of each JavaScript file. Pull in the correct localized JavaScript file from your HTML or JSP.
  2. Generate the JavaScript dynamically on the server, injecting localized strings as indicated by a locale parameter in the request.

The first option is certainly simple enough. Want a Japanese version of the JavaScript file? Great, create a second copy and localize the text in that file. Now you have two .js files: an original (maybe English) version and a localized second version. In your HTML or JSP file, which are presumably localized as well, you include the localized JavaScript file specifically.

<!-- English html file -->
<SCRIPT LANGUAGE="JavaScript" SRC="script/hello_en.js"></SCRIPT>

Then, of course, in your Japanese HTML file, you’d have this:

<!-- Japanese html file -->
<SCRIPT LANGUAGE="JavaScript" SRC="script/hello_ja.js"></SCRIPT>

But I have a problem with this. I don’t like duplicating the JavaScript code across multiple files, knowing that only the localized text is different. I suppose it doesn’t matter much really, but there’s always the possibility of getting code out of synch.

In some ways I prefer the more complex second option. Instead of loading entirely different localized JavaScript files, this option loads a single JavaScript file but injects the localized strings into it at runtime. In this option, you make a call to a single script but provide a language parameter along with the script link.

<head>
<title>Localized JavaScript Demo</title>
<SCRIPT LANGUAGE="JavaScript" SRC="script/hello.js?lang=en"></SCRIPT>
</head>

Of course, in order to make this work, you now have to introduce a servlet or jsp to intercept this request, inject the localized strings, and return the localized JavaScript file. That’s not that tough. The following jsp file accomplishes part of that:

<%@page contentType="text/JavaScript" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<fmt:setLocale value="${param['lang']}"/>
<fmt:setBundle basename="com.joconner.demo.res.hello"/>

var localizedStrings = {
    HELLO: "<fmt:message key="HELLO"/>",
    GOOD_MORNING: "<fmt:message key="GOOD_MORNING"/>",
    GOOD_AFTERNOON: "<fmt:message key="GOOD_AFTERNOON"/>",
    BYE: "<fmt:message key="BYE"/>"
};

function sayHello() {
    alert(localizedStrings.HELLO);
};

The final JavaScript file has a localizedStrings object with all the needed localized text strings. Not to bad, not bad at all.

Although they aren’t shown here, resource bundles hold the localized text — one bundle for each language.

That’s my quick solution. Have another idea for creating localized JavaScript files? Let me know!

Category: JavaScript  |  Comment (RSS)  |  Trackback

Leave a comment