How to make client side I18n with mustache.js

Question

i have some static html files and want to change the static text inside with client side modification through mustache.js.

it seems that this was possible Twitter\'s mu

Answer 1

Make sure to remember that other languages are significantly different from EN.

In FR and ES, adjectives come after the noun. "green beans" becomes "haricots verts" (beans green) in FR, so if you're plugging in variables, your translated templates must have the variables in reverse order. So for instance, printf won't work cuz the arguments can't change order. This is why you use named variables as in Option 1 above, and translated templates in whole sentences and paragraphs, rather than concatenating phrases.

Your data needs to also be translated, so the word 'poop', which came from data - somehow that has to be translated. Different languages do plurals differently, as does english, as in tooth/teeth, foot/feet, etc. EN also has glasses and pants that are always plural. Other languages similarly have exceptions and strange idoms. In the UK, IBM 'are' at the trade show whereas in in the US, IBM 'is' at the trade show. Russian has several different rules for plurals depending on if they are people, animals, long narrow objects, etc. In other countries, thousands separators are spaces, dots, or apostrophes, and in some cases don't work by 3 digits: 4 in Japan, inconsistently in India.

Be content with mediocre language support; it's just too much work.

And don't confuse changing language with changing country - Switzerland, Belgium and Canada also have FR speakers, not to mention Tahiti, Haiti and Chad. Austria speaks DE, Aruba speaks NL, and Macao speaks PT.

Answer 2

This is quite simple and pretty straightforward.

First, you will need to add code to determine the Query String lang. For this, I use snippet taken from answer here.

function getParameterByName(name) {

    var match = RegExp('[?&]' + name + '=([^&]*)')
                    .exec(window.location.search);

    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));

}

And then, I use jQuery to handle ajax and onReady state processing:

$(document).ready(function(){
    var possibleLang = ['en', 'id'];
    var currentLang = getParameterByName("lang");
    console.log("parameter lang: " + currentLang);
    console.log("possible lang: " + (jQuery.inArray(currentLang, possibleLang)));
    if(jQuery.inArray(currentLang, possibleLang) > -1){
        console.log("fetching AJAX");
        var request = jQuery.ajax({
            processData: false,
            cache: false,
            url: "data_" + currentLang + ".json"
        });
        console.log("done AJAX");

        request.done(function(data){
            console.log("got data: " + data);
            var output = Mustache.render("<h1>{{title}}</h1><div id='content'>{{content}}</div>", data);
            console.log("output: " + output);
            $("#output").append(output);
        });

        request.fail(function(xhr, textStatus){
            console.log("error: " + textStatus);
        });
    }
});

For this answer, I try to use simple JSON data:

{"title": "this is title", "content": "this is english content"}

Get this GIST for complete HTML answer.

Answer 3

My answer is based on developingo's. He's answer is very great I'll just add the possibility to use mustache tags in the message keycode. It is really needed if you want to be able the get messages according to the current mustache state or in loops

It's base on a simple double rendering

 info.i18n = function(){
        return function(text, render){
            var code = render(text); //Render first to get all variable name codes set
            var value = i18n.t(code)
            return render(value); //then render the messages
        }
    }

Thus performances aren't hit because of mustache operating on a very small string.

Here a little example :

Json data :

 array : 
    [
        { name : "banana"},
        { name : "cucomber" }
    ]

Mustache template :

{{#array}}
    {{#i18n}}description_{{name}}{{/i18n}}
{{/array}}

Messages

description_banana = "{{name}} is yellow"
description_cucomber = "{{name}} is green"

The result is :

banana is yellow
cucomber is green

Plurals

[Edit] : As asked in the comment follows an example with pseudo-code of plural handling for english and french language. Its a very simple and not tested example but it gives you a hint.

description_banana = "{{#plurable}}a {{name}} is{{/plurable}} green" (Adjectives not getting "s" in plurals)

description_banana = "{{#plurable}}Une {{name}} est verte{{/plurable}}" (Adjectives getting an "s" in plural, so englobing the adjective as well)

info.plurable = function() 
{
  //Check if needs plural
  //Parse each word with a space separation
  //Add an s at the end of each word except ones from a map of common exceptions such as "a"=>"/*nothing*/", "is"=>"are" and for french "est"=>"sont", "une" => "des"
  //This map/function is specific to each language and should be expanded at need.
}

Answer 4

I don't think Silent's answer really solves/explains the problem.

The real issue is you need to run Mustache twice (or use something else and then Mustache).

That is most i18n works as two step process like the following:

1. Render the i18n text with the given variables.
2. Render the HTML with the post rendered i18n text.

Option 1: Use Mustache partials

<p>{{> i18n.title}}</p>
{{#somelist}}{{> i18n.item}}{{/somelist}}

The data given to this mustache template might be:

{ 
  "amount" : 10, 
  "somelist" : [ "description" : "poop" ]
}

Then you would store all your i18n templates/messages as a massive JSON object of mustache templates on the server:

Below is the "en" translations:

{ 
   "title" : "You have {{amount}} fart(s) left", 
   "item" : "Smells like {{description}}"
}

Now there is a rather big problem with this approach in that Mustache has no logic so handling things like pluralization gets messy. The other issue is that performance might be bad doing so many partial loads (maybe not).

Option 2: Let the Server's i18n do the work.

Another option is to let the server do the first pass of expansion (step 1). Java does have lots of options for i18n expansion I assume other languages do as well.

Whats rather annoying about this solution is that you will have to load your model twice. Once with the regular model and second time with the expanded i18n templates. This is rather annoying as you will have to know exactly which i18n expansions/templates to expand and put in the model (otherwise you would have to expand all the i18n templates). In other words your going to get some nice violations of DRY.

One way around the previous problem is pre-processing the mustache templates.

Answer 5

You can use lambdas along with some library like i18next or something else.

{{#i18n}}greeting{{/i18n}} {{name}}

And the data passed:

{
    name: 'Mike',
    i18n: function() {
        return function(text, render) {
            return render(i18n.t(text));
        };
    }
}

This solved the problem for me