Localization for developers

Localization for developers

Locale

A group of target users described by location, language, and preferences.

Locale Identifiers International Standard

Composed of two values concatenated:
The ISO 639.1 / 639.2 (Language. lowerCase) + ISO 3166 ( Region. UpperCase)
eg.

en_US
en_CA
fr_CA

Localization (L10n)

The process of tailoring a product for a specific locale.

translation
unit conversion (metric vs imperial)
Currency
time zones
social conventions (eg. driving a car on the right side of the road)
legal regulation (eg. cookies warning in Europe)

Platforms

Shuttle from Square.com
Gettext Open sourced by GNU.org
One Sky
Transifex this one allows translators to translate on the UI, so the context is more clear.

Javascript libraries

FormatJS with support for ReactJS
MessageFormat supports pluralization and other goodies
i18next

Associated Preferences

Time format
Date format
Number format
Currency
Keyboard layout
Printer Paper Sizes
Writing Standard (type of characters, etc)

Pseudo-Localizing Your Product

Create a test locale to test your i18n efforts eg. en-US
Verify text fields are encoded properly
Verify that the correct media is loading
Check that all settings are loaded from an external source.

Management

Localization Management System

Gather all contents of your app that needs translating into one location.

Translation Memory (TM)

A system that keeps track of how a term, phrase, or sentence has been translated previously, allowing for re-use of already translated values and increased consistency of a translation.

Machine Translator (MT) - eg. Google translate.

Language Needs

What letters/characters does the language use?
What special symbols, like currency, are used?
What direction is the language written in?

(Potentially) Protected Information

Name
Address
Birthday
Personally Identifiable Information (PII)
Gender
Ethnic heritage
Opinions
Political affiliation

Law reference

eg. COPPA (Children’s Online Privacy Protection Act)

RTL (Right To Left) languages

The layout should be mirrored. Everything aligned to the right.

BiDi (Bi Directional)

Combines RTL and LTR

Unicode knows how to order the chars for LTR and RTL but there are some chars that are BiDi and need algorithm to know how to display them.

You can tell unicode how to display it using the property <span dir="ltr'>123 Easy St.</span>

Control Characters

Otherwise you can signal it with a special unicode to set the direction. eg. [U+202a] 123 Easy St. [U+202c]

Characters	Direction	Effect
Most Alphabets	LTR	Strong
Hebrew and Arabic	RTL	Strong
European Numbers	None	Weak

Unicode	Function	Purpose
U+202a	LTR Embed	Specifies direction for weak characters
U+202b	RTL Embed	Specifies direction for weak characters
U+202c	Pop	Reverts last embed/override
U+202d	LTR Override	Specifies direction for all characters
U+202e	RTL Override	Specifies direction for all characters

Good talk about BiDi

Format

Different interrogation, exclamation, quotation, symbols, commas, etc.
Even different bold, italics etc for each language.

Numbers and Dates

01/05/15 month, day, year in America
1,000 vs 1.000

Form Validation

Family names are often expected to come first.
Label input boxes wherever you can.
Address formats are also considerably different.
Help your users avoid errors and re-submissions.

Icons and colors

Icons may be meaningless in other countries.
Colors have different connotations depending on the country. eg. red is a popular color for brides in China
Flags to represent the language can be politically offending. (eg. english flag to represent the languages)
Be extremely cautious with any images or icons that display any part of the human body. (eg. thumbs up, etc.. ) may be offending.
Animals symbolize different things.. eg. Cow is holy in India.

Sorting

If you need to sort entries in a foreign language, you need to make sure that the sorting happens according to the standards of that locale.

Sorting accented characters is tricky.

Use Localized Sorting.

Adapting User Interface

UI should support for at least a 30% expansion in length. 50-60% is safer.
Check your icons, especially arrow direction.
Shortcut keys it is recommended to leave them in English (eg. Ctrl+S for Save)

Choosing a translator service

Read this guide before hiring a translator

Guide on translation standards

Translation services

Internationalization (l18n)

Preparing a product to support multiple languages and settings.

Media

Consider what images mean to the culture of your users.
Consider the direction of reading also for the images since that’s how their eyes will flow on the browser.
Avoid baked-in text in the image.
Save your original/master PSD/AI files so you can re-edit the images later.

Code

Separate code from content
Detect regions and language settings
prepare product to display content of different length / format
Use string interpolation instead of concatenation. (eg. var log = "The user $user logged in on $time"