Skip to contentSkip to navigationSkip to topbar
Figma
Star

Localization

Localization refers to adapting a product, service or content to fit a specific market or country.


(information)

Have more questions?

This page contains general guidance around best practices for localization. If you are a Twilion and have any questions, please visit the Global team's product docs(link takes you to an external page), or contact them on Slack at #help-localization.

Introduction

Introduction page anchor

Self-service tips on how to build experiences in a way that's appropriate and meaningful to all our customers, no matter where they are in the world.

Definition of terms

Definition of terms page anchor

Internationalization

Internationalization page anchor

Internationalization is the design and development of a product or interface that enables easy localization for target audiences that vary in culture, region, or language.

Localization refers to the adaptation of a product or interface to meet the language, cultural and other requirements of a specific target market/locale.

Converting text from one language to another. Not to be confused with localization, translation is just one part of localizing a product.

A linguistic region defined by both its language and country. Please note that languages and countries won't always have a 1:1 mapping.

Linguistic regionLanguageCountry
fr-FRFrenchFrance
fr-CAFrenchCanada
pt-BrazilPortugueseBrazil

Continue reading to learn how to build experiences in a way that's appropriate and meaningful to all our customers, no matter where they are in the world.

Leave blank space around condensed UI components

Leave blank space around condensed UI components page anchor
  • Leave blank space around condensed UI components, such as popovers, buttons, and tabs to prevent unexpected line breaks.
    • For some languages, text is up to 30% longer on average than English.
  • If text gets truncated or has line-breaks at wrong places could lead to grammatical errors and design breaks.
  • Make all UI components expandable (auto-layout).
  • Don't assign fixed-width or height to UI components, unless there's a compelling reason.

Order in components matter

Order in components matter page anchor

Avoid creating UI sentences. If the layout and functionality of your interface is dependent on a certain word order, it's likely to break when localized. Learn more here.

Avoid forced capitalization

Avoid forced capitalization page anchor
  • Avoid setting a single capitalization design rule that fits all languages.
    • In French, Italian, and Spanish (among others) only the first letter should be capitalized for certain words.
    • In German (P1), certain types of nouns, gerunds, and names must start with upper-case.
  • Developers should avoid using CSS, e.g. text-transform: capitalize; to handle capitalization.

Avoid flags to represent languages

Avoid flags to represent languages page anchor
  • Use flags only to represent countries and not to represent languages.
  • Always write the name of the language instead of using a flag.
  • If text over images is needed, overlay it by code, using HTML and CSS.

Paste works with any internationalization library. Our components occasionally contain English text, but all instances are overridable with props. They are easily identifiable as they include i18n in their names.

For more information, look into the "Internationalization" section for each component page. Some examples: Checkbox, Popover, and Data Grid.

Here's an example showing three languages in Paste using i18next(link takes you to an external page).