Skip to main content

Localizing JavaScript files with JSPs

Posted by joconner on August 18, 2008 at 11:42 PM PDT

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!

Related Topics >>

Comments

We do something like your second option for sometime now. But instead of SRC="script/hello.js?lang=en" we have just SRC="script/hello.jsp" So no extra servlet or JSP needed and no need to specify the lang by hand - its handled as all other JSP i18n. -- jcranky.com

I wrote a post about that issue some months ago: http://dertompson.com/2008/04/17/internationalization-and-javascript/ and I found this one very interesting: http://www.lingoport.com/javascript-internationalization-%E2%80%93-the-g... Simply said it is like your second solution, it includes a JSP that reads out the browser locale and creates the JavaScript constants used in the JS files.