Trouble with detecting browser language and using it with i18next

Question

I'm working on a webapp. I'm using i18next and it doesn't detect language unless I specify "lng" on options. If I use "navigator.language || navigator.userLanguage" and it's OK with Chrome. It returns something like "en". But Firefox for example, returns "en-GB". I don't use regional translation and i18next doesn't redirect "en-GB" to "en". So, system doesn't work.

Here is my code:

$(document).ready(function(){
      i18next.use(i18nextXHRBackend);
      i18next.init({
          'debug': true,
          'lng': navigator.language || navigator.userLanguage,
          'fallbackLng': 'en',
          'load': 'currentOnly',
          'backend': {
            loadPath: 'locales/{{lng}}/{{ns}}.json'
          }
      }, function() {
          jqueryI18next.init(i18next, $);
          $('body').localize();
      });
    });

It's probably not a very well supported feature … Would `navigator.language.substr(0, 2)` suffice? That way 'en-GB' is turned into 'en' … This really depends on the list of values that i18next accepts for 'lng'. — Aurel Bílý, Jul 22 '16 at 17:14
@AurelBílý It works with that. Thanks. So, nothing wrong with my code, is it? — mutlucan96, Jul 22 '16 at 18:50

score 5 · Answer 1 · edited Jan 10 '18 at 17:04

i18next supports region languages...that's what localization is about.

if you like to support only languages without region set load: 'languageOnly':

$(document).ready(function(){
  i18next.use(i18nextXHRBackend);
  i18next.init({
      'debug': true,
      'load': 'languageOnly',
      'lng': navigator.language || navigator.userLanguage,
      'fallbackLng': 'en',
      'load': 'currentOnly',
      'backend': {
        loadPath: 'locales/{{lng}}/{{ns}}.json'
      }
  }, function() {
      jqueryI18next.init(i18next, $);
      $('body').localize();
  });
});

this will avoid accepting en-GB for lookups and only use en. Without setting this i18next will still output same result but also try to load en-GB translations.

if you want to retrieve the short version later? what's should I call? — a.barbieri, Mar 13 '18 at 12:23

Trouble with detecting browser language and using it with i18next

1 Answers1