Internationalisation

[ssirois]

Expected Behaviour

All text rendered by the RingMe.js library should be translated.

Actual Behaviour

Texts are currently only in English (written by a non-native English speaker) and strings are used without being proxy-ed by a translation method.

[ssirois]

It would be great if a technique could be found without making RingMe.js depend on a huge external library.

@peakwinter any thoughts or a little gists example to inspire us? :wink:

[ssirois]

Or maybe @hs0ucy or @Tonours have ideas on internationalization techniques in JS without huge external library dependency?

[ventilooo]

What we want is an automated translation based on the page language ? i.e : set the translation to the same language as the one indicated by the lang tag ? OR Let the dev choose the translation ?

[Tonours]

On page load we can determine which locale is used by the user. If we are storing translation in an object we can retrieve translation by a key and get associated value.

Exemple: https://jsfiddle.net/rs7ncryr/2/

var translation = {
    fr: {
        'title': 'Mon titre',
        'button': 'Mon bouton'
    },
    en: {
        'title': 'My title',
        'button': 'My button'
    }
};

/**
 * Returns the current language of navigator
 * Based on : http://gu.illau.me/posts/the-problem-of-user-language-lists-in-javascript/
 *
 * @return {String} User language code
 */
function getLocale() {
  if (navigator.userLanguage) {
    return navigator.userLanguage.substring(0, 2);
  }
  if (navigator.language) {
    return navigator.language.substring(0, 2);
  }
  if (navigator.browserLanguage) {
    return navigator.browserLanguage.substring(0, 2);
  }
  if (navigator.systemLanguage) {
    return navigator.systemLanguage.substring(0, 2);
  }
  return 'en';
};

function translateContent(locale, ...targets) {
    targets.forEach((target) => {
    document.querySelector(`#${target}`).innerText = translation[locale][target];
  });
};

let locale = getLocale();

translateContent(locale, 'title', 'button');

Does that make sense to you ?

[peakwinter]

Given the size of the project I think @Tonours' suggestion is entirely appropriate!

[ssirois]

I do agree this is an appropriate solution.

I'll document myself on the translation work-flow of Ring itself and see how the work-flow could fit this solution.

[ssirois]

Talking AFK with @Tonours, it could be great for this library to not store 28 languages in the final JavaScript file since the webmaster knows that her/his website is only in Russian or in both French and English.

This conversation addresses @ventilooo questions in https://github.com/savoirfairelinux/ringme.js/issues/17#issuecomment-291187312

Food for thoughts.

[ventilooo]

It's perfect for me ;) I have my answer :+1:

[ssirois]

Any thoughts on first baby step towards an internationalized library in #20?

[ssirois]

I've heard that Ring team is looking forward to use http://pootle.translatehouse.org/ as a tool to help translations.

I will take a look and see out it could be use to help use with this.