L20n

NextGen L10n Framework for the Web

Created by Mozilla

Slides www.braniecki.net/talks/imug2014/ (zip) (pdf)

How many of you…

are native English speakers?

How many of you…

use software in a non-English locale?

UI localization

Zibi Braniecki, @zbraniecki

Mozilla L10n Labs, @mozilla_l10n

Mozilla

Mozilla

  • over 700 million daily users
  • Web browsers, email clients, mobile platforms
  • 93+ languages
  • 100% volunteer based
  • maintaining localizations for over 10 years

Introducing the problem

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)

Solution

New paradigm

client-side

isolated

grammar-agnostic

responsive

based on a social contract

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

L20n

Data models

Resource

Locale

Context

Bindings

Syntax


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

<hello "Hello, World!">
					

<hello "Witaj świecie!">
					

document.l10n.localize(['hello'], function(l10n) {

  element.textContent = l10n.entities['hello'].value;

});
					

Context data


<script type="application/l10n-data+json">
{
  "user": {
    "name": "John",
    "gender": "male"
  }
}
</script>
					

<hello "Hello, {{$user.name}}">
					

<missed[ $missedCalls == 1 ? 'one': 'many' ] {
  one: "You have one missed call",
  many: "You have {{$missedCalls}} missed calls"
}>
					

<plural($n) { $n == 1 ? 'one': 'many' }>
					

<missed[plural($missedCalls)] {
  one: "You have one missed call",
  many: "You have {{$missedCalls}} missed calls"
}>
					

Globals

@os

@hour

@screen.width


<hello[ @hour < 12 ? 'morning' : 'evening' ] {
  'morning': 'Good morning',
  'evening': 'Good evening'
}>
					

<hello[ @screen.width < 640 ? 'short' : 'long' ] {
  'short': 'Sound',
  'long': 'Sound & Voice Settings'
}>
					

document.l10n.localize(['hello'], function(l10n) {

  element.textContent = l10n.entities['hello'].value;

});
					

Responsive l10n

CLDR / ICU extensions?


<hello "You have @i18n.formatCurrency($savings)">
					

<unreadEmails "You have @i18n.formatNumber($unreadEmails)">
					

<todayIs "Today is @i18n.toLocaleDateString($date)">
					

Language Packs

Tools

We're committed to invest in l10n environments

Example concept

1.0 RC

Release in the coming days

Try it at l20n.org

Fork it at github.com/l20n

THE END

BY Zibi Braniecki / mozilla.org