How to translate strings in JS

Question

I have a project which I want to translate into multiple languages for the PHP Part I use Zend Frameworks Zend_Translate with GetText. Now I want to translate the JS part too.

I am using the jQuery JS Framework and would love to hear your thoughts on translation for JS files

Solution 1

I have successfully used GetText for translation of JavaScript files in three projects.

Of course GetText natively doesn't support JavaScript and JavaScript also doesn't support GetText. My solution has been the following.

• In JavaScript I surround translatable strings with gettext("your text here").
• Then I have a script that pulls the strings out of JavaScript files and creates a C file, because C is supported by gettext.
• Then I use xgettext on the generated C files and on any other files in my project to produce POT and PO files.

After translating PO files, I have to get the translations back to JavaScript...

• I parse the JavaScript files again, remembering the list of translatable strings, then for every locale:
• Using a language with GetText support (in my case PHP) I translate all the strings and output JavaScript file.

For example a locale file for Estonian (e.g. et_EE.js) might look like this:

var LOCALE = {
  "Hello": "Tere",
  "My name is %s": "Minu nimi on %s",
  "Enter your credit card number": "Sisesta oma krediitkaardi number"
};

function gettext(string) {
  return LOCALE[string] ? LOCALE[string] : string;
}

Depending on the selected locale you either include et_EE.js or en_US.js or ...

en_US.js will probably contain just the following:

function gettext(string) {
  return string;
}

A bit trickier for ngettext(), but you should get the general idea.

The great thing is that I can use all the gettext tools already available. Especially when I have translatable texts in both PHP and JavaScript - I can use the same tool for translating both of them and also ensure that the same string is translated the same way both in JavaScript and PHP.

NOTE: If you aren't dealing with a JavaScript-intensive web-app, you should think twice before having page content created by JavaScript in the first place.

Solution 2

This might also be of interest to you: a gettext plugin for jQuery.

Solution 3

http://24ways.org/2007/javascript-internationalisation

Solution 4

Well, you could extend strings to give them a translated-function, which looks up the receiver in a locale.

You would use it like this:

alert("Your favorite language is English!".translated());

And you would be given an alert with "tu idiom prefiero es Espanol", or something

niko

Solution 5

// just for some idea 
//var language ="fr_FR";
var language ="sp_SP";

var FRLOCALE = {
  "Hello": "bonjure ",
  "My name is %s": "mo nome oc ",
  "what": "some french thing"
};

var SPLOCALE = {
  "Hello": "Spanish for hello",
  "My name is %s": "spanish for my name is ",
  "what": "qu"
};

function translated(language, string){
    if (language.indexOf("fr") > -1) {
        return FRLOCALE[string] ? FRLOCALE[string] : string;
    } 

    if (language.indexOf("sp") > -1) {
      return SPLOCALE[string] ? SPLOCALE[string] : string;
    }

    return string; 
}

alert(translated(language,"Hello"));

alert(translated(language,"some thing not translated "));

View more solutions

Comments

[Rene Saarsoo]

Works, but pretty ugly solution.

[Jan Hančič]

Apart from configuring the server to treat js files as PHP files I don't see any problems. And even that is not an issue if you own the server. Please share why this is ugly :) maybe I'm missing something.

[Rene Saarsoo]

It's ugly, because the syntax is ugly. It clearly won't look good if your JS code is littered with <?php echo $l->Get("..."); ?> inside every string you want to translate. The string you are actually translating almost gets lost inside the PHP that's needed for translating it.

[Nikolai Prokoschenko]

This method wouldn't work with plural forms or contexts without considerable gettext re-implementation effort.

[Rene Saarsoo]

@rassie: Could you be more specific? Because I have already implemented this system with support for plural forms aswell. I haven't used contexts, but I don't really see a problem with supporting those as well.

[Erich Kitzmueller]

Great idea! IMO it's much more readable to have .translated() appended than to surround the string with translate()

[Iaroslav Vorozhko]

This is possible solution, but more readable to use static method like <?= T::_('MyString') ?> , so no global variables especially with such short name like $l is.

[milosmns]

It's never readable when you mix PHP into JS to translate strings. I like the first answer to this question.. as a developer you should tend to make your life easier by creating clean and compact code, not "hack things to get them to work".