Responsive Localization

with L20n

How many of you…

are native English speakers?

Content localization

vs.

UI localization

UI localization

Zbigniew Braniecki, @zbraniecki

Staś Małolepszy, @stas

How does UI l10n work?

dated approach

English-centric

key-value pairs

plurals if you're lucky

File → Open…

Jane liked your album with 4 photos and shared 3 of them to her 357 followers in 4 countries at 9.23 AM yesterday (on April 24th, 2013). Have a good day!

(You have 3 more unread notifications)

and, perhaps more importantly

New paradigm

client-side

isolated

grammar-agnostic

responsive

based on a social contract

What L20n looks like

<h2 l10n-id="hello"></h2>
					

<hello "Hello, World!">
					

<hello "Witaj świecie!">
					

document.l10n.get('hello');
					

Witaj świecie!

Language isolation

<new {
  zero: "No new notifications",
  one: "One new notifications",
  other:  "{{ $count }} new notifications"
}>
					

<new {
  zero: "Brak nowych powiadomień",
  one: "Jedno nowe powiadomienie",
  few: "{{ $count }} nowe powiadomienia",
  many:  "{{ $count }} nowych powiadomień",
  other: "{{ $count }} nowego powiadomienia"
}>
					

Asynchronous and responsive

document.l10n.localize(['hello', 'unread'], function(l10n) {
  var node = document.querySelector('[l10n-id=hello]');
  node.textConent = l10n.entities.hello;
  node.classList.remove('hidden');
});