MozL10n

Progress on Firefox OS localization framework

Created by Zibi "gandalf" Braniecki / @zbraniecki

Layers of localization

Technological (API, code)

Localization (translation & culturally-dependant UI)

Management (release cycle, QA, build time services)

Human (localizers, agencies, employees)

Goals

client-side

isolated

grammar-agnostic

responsive

based on a social contract

Social contract

Developers provide important data as context data

mozL10n always returns strings

Current phase

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

hello = Hello, World!
					

hello = Witaj świecie!
					

Next steps

Establish the social contract via API

Language packs

WebAPI

L20n file format

DOM Overlays

Responsive localization

Language packs

WebAPI

Resource loading → Gecko

Node l10n → Gecko

Language Negotiation → Library

Langpack service → Library

JS API → Library

L20n file format

hello = Hello, World!
					

<hello "Hello, World!">
					

Complex entity

fancyWidget = {[ plural(n) ]}
fancyWidget[zero] = Cities
fancyWidget[one] = City
fancyWidget[many] = Cities
fancyWidget.ariaLabel = Select city
fancyWidget.placeholder = Your city
					

<fancyWidget[@plural($n)] {
  zero: "Cities",
  one: "City",
  many: "Cities"
}
  ariaLabel: "Select city"
  placeholder: "Your city">
					

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.",
}>
					

Custom globals

<turnOff[@device.type] {
  phone: "Turn off your phone",
  tv: "Turn off your TV",
  tablet: "Turn off your tablet"
}>
					

Date/time formatting

<currentTime "Current time is {{ @formatTime($time, "%H:%i") }}">
					

DOM Overlays

<p l10n-id="learnMore">
  <img src="./brandLogo.png" />
  <a href="http://www.mozilla.org" />
</p>
					

<learnMore "Learn more about <img/> at our website">
					

Responsive L10n

<warning[ @screen.width>480 ? 'short' : 'long' ] {
  short: "Warn me before redirect or reload",
  long: "Warn me when websites try to redirect or reload the page",
}>
					

Responsive L10n

Q & A

Read more at http://www.l20n.org