Localization in Polymer?

Question

I'm going to create a webapp with Polymer. For that webapp I need localization. Is there a Polymer way to do localization? Has anyone ever done localization in a Polymer webapp?

Answer 1

I18n and l10n are also on my to-do list. Currently i'm porting an app from AngularJS to Polymer. The back-end is Ruby on Rails. I use the i18n-js gem which converts the Rails translation files (en.yml, de.yml and so on) into one big JavaScript file containing an I18n object with all the translations. This gem also provides a JavaScript library for performing text translations and value localizations. But there are other JavaScript libraries providing a similar functionality.

The current locale is set from the response of a HTTP request, returning the users Accept-Language header.

Nothing Polymer specific up to this point.

I then created a bunch of global Polymer expression filters that perform the various locale transformations on their input strings. This is the same method as the one that i've learned to use in an AngularJS application. The translation filter looks like follows (I18n.t is the translation function of the JavaScript library)

PolymerExpressions.prototype.i18n = function(key) {
  return I18n.t(key);
};

and is used like so

<paper-button label="{{ 'action.help' | i18n }}"></paper-button>

A date localization may be written as

{{ someDate | i18n_date('short') }}

I packaged the i18n filters and additional helper functions into a Polymer element, so I can also include this element in another element and use the translation functions from within it's JavaScript code.

The i18n element is also include in my main app element where it initializes the I18n library and sets the default and current locale.

Answer 2

Use Polymer.AppLocalizeBehavior

https://github.com/PolymerElements/app-localize-behavior

I am using this behavior in PWA Template for locales per custom element.

https://github.com/StartPolymer/progressive-web-app-template