Javascript and Translations

Question

I have a PHP application that makes extensive use of Javascript on the client side. I have a simple system on the PHP side for providing translators an easy way to provide new languages. But there are cases where javascript needs to display language elements to the user (maybe an OK or cancel button or "loading" or something).

With PHP, I just have a text file that is cached on the server side which contains phrase codes on one side and their translation on the other. A translator just needs to replace the english with their own language and send me the translated version which I integrate into the application.

I want something similar on the client side. It occurred to me to have a javascript include that is just a set of translated constants but then every page load is downloading a potentially large file most of which is unnecessary.

Has anyone had to deal with this? If so, what was your solution?

EDIT: To be clear, I'm not referring to "on-the-fly" translations here. The translations have already been prepared and are ready to go, I just need them to be made available to the client in an efficient way.

Answer 1

How about feeding the javascript from php? So instead of heaving:

  <script type='text/javascript' src='jsscript.js'></script>

do

 <script type='text/javascript' src='jsscript.php'></script>

And then in the php file replace all outputted text with their associated constants.

Be sure to output the correct caching headers from within PHP code.

EDIT

These are the headers that I use:

header('Content-type: text/javascript');
header('Cache-Control: public');
header('expires: '. date("r", time() + ( 7 * 24 * 60 * 60 ) ) ); // 1 week
header("Pragma: public");

Answer 2

What you are looking for seems to be AJAX (client and server exchanging asyncronous requests using Javascript).

If you're looking for something ready-made, take a peak at Google Translation AJAX APIs.

Answer 3

Hello,

I have never personally had to do this, but my first guess would be to reference a third party library. I believe the Google AJAX API might have just the tool to do this, and since the library is through Google, the javascript file will not be downloaded from your site.

Try digging through the following site for a bit: http://code.google.com/apis/ajaxlanguage/documentation/

Let me know if that helps you out. I might be interested in implementing something similar for the website I manage.

Good Luck, C

Answer 4

Well, it looks like my response was a bit too slow... +1 friol

Answer 5

I like Pim Jager's answer, and have done that myself. If you don't want to have the PHP generate the JavaScript for you (say, for performance reasons), you can have a master copy of the JavaScript libs, and when they change, run a translation program to generate a version of each lib for each language. Then just have the PHP put the right version for the current user in the script tag it sends.

I worked on a system that needed both heavy localization and heavy branding for different customers. What we did was anything that got sent to the screen had a unique macro, like [3027] (or something like that). Then we had a bunch of locale and branding files that had entries for each macro code, and the text to substitute for each macro. A program would loop through all the source files and all the languages and make the substitutions.

We found we also needed some functions for localization, for monetary amounts, dates, times, etc. It all worked pretty well.

We found we needed one more important thing: A tool to go through all the language files and make sure they all had all the necessary codes. Big time saver.

Answer 6

I usually load the appropriate language values as a JavaScript object in a separate file which the rest of my code can reference:

var messages = {
    "loading": "Chargement"
}

alert(messages.loading);

The language library will be cached on the client side after the first load and you can improve load efficiency by splitting values into separate files that are loaded based on context: e.g. a small library for public operations, an additional one behind a login, etc.