Responsive Localization

with L20n

How many of you…

are native English speakers?

Content localization

vs.

UI localization

Zbigniew Braniecki, @zbraniecki

Staś Małolepszy, @stas

How does interface localization 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)

localization logic in your source code

(if you're a developer)

other languages' logic in your language's logic

(if you're a localizer)

and, perhaps more importantly

poor UX

(if you're a user)

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');

Language isolation


<liked "{{ $user.name }} liked your photo.">


<liked[$user.gender] {
  feminine: "{{ $user.name }} polubiła twoje zdjęcie.",
  masculine: "{{ $user.name }} polubił twoje zdjęcie.",
}>

Encapsulation


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

Social contract

Developers provide important data as context data

L20n always returns strings

Responsive

Retranslate pieces of UI when something changes

1.0 Beta

Released today

Try it at l20n.org

Fork it at github.com/l20n