CODEWITHSUNDEEP
javascriptlocalizationmeteor
Amc_rtty
Amc_rtty

Reputation: 3803

Localizing a Meteor app

I want to localize a meteor app by detecting browser language, and also a change language option on homepage.

To do this, I thought I detect the browser language and set a session value e.g. "current_lang" : "en-US", and have some helper methods that read the texts according to the locale this session value contains. So I would have e.g. a JS object on the client called "Resources" that contains some arrays e.g. "en-US" : [res1key: res1value, res2key: res2Value] and a helper method to retrieve them by key.

My question is: is this a good approach to localize a meteor app, or does meteor already have something like this that is done "under-the-hood"?, e.g. I'm sure they thought about localization so far but I just can't find anything in the docs referring to it.

Thanks.

Upvotes: 1

Views: 1056

Answers (3)

peter nieuwenhuyse
peter nieuwenhuyse

Reputation: 11

in my meteor apps i'm using tap:i18n package, it is well documented see: https://atmospherejs.com/tap/i18n

to start with browserlanguage i use in client/main.js (or in any other init file on client)

getBrowserLanguage = function() { 
  return navigator.language || navigator.userLanguage
};

Meteor.startup(function() {
  TAPi18.setLanguage(getBrowserLanguage);
});

say you create a template for your languageswitcher like:

<template name="LanguageSwitcher">
  <ul>
    <li class="en">EN</li>
    <li class="nl">NL</li>
    <li class="fr">FR</li>
  </ul>
</template>

then my template helper looks like this:

Template.LanguageSwitcher.Oncreated(function(){
  Session.set('language', navigator.language || navigator.userLanguage);
});

Template.LanguageSwitcher.events({
  'click .en' : function(){
    Session.set('language','en');
    TAPi18n.setLanguage('en');  
  },
  'click .nl' : function(){
    Session.set('language','nl');
    TAPi18n.setLanguage('nl');  
  },
  'click .fr' : function(){
    Session.set('language','fr');
    TAPi18n.setLanguage('fr');  
  }  
});

I'm using a extra global session cause i find it easy to work with translated content in my collections. Last thing to do is create some json files with the translations, just create a folder in root folder named i18n and in this folder create files using the syntax : [language].i18n.json ( ex nl.i18n.json)

{
  "original string" : "translation"
}

now you'll be able to use this in your templates like

<h1>{{_ "original string"}}</h1>

hope this gives you a headstart on how to implement internationalization.

Upvotes: 1

Amc_rtty
Amc_rtty

Reputation: 3803

Seems this is a good solution to localize a meteor app:
https://github.com/TAPevents/tap-i18n

reading the language resource in the template: 

<template name="messages_today">
    <p>{{_ "inbox_status" "Daniel" count=18}}</p>
</template>

the translation json file

{ 
     "inbox_status": "Hey, %s! You have received one new message today.",
     "inbox_status_plural": "Hey, %s! You have received %s new messages today." 
}

Upvotes: 0

Christian Fritz
Christian Fritz

Reputation: 21354

I would always check whether any of the existing packages solve your problem first. There seems to be quite a few meteorite packages on atmosphere you could try: https://atmospherejs.com/package/jbabel-pkg?q=i18n

Even if none of them solves your problem 100%, I usually find it easier to extend one of these packages, given that they always provide something that seems useful and it is so easy to just fork them on github. That way you can also contribute back if you like.

Upvotes: 1

Related Questions