Localization
Localization refers to adapting a product, service or content to fit a specific market or country.
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, or contact them on Slack at #help-localization.
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.
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 region | Language | Country |
|---|---|---|
| fr-FR | French | France |
| fr-CA | French | Canada |
| pt-Brazil | Portuguese | Brazil |
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, 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.
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 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.
- 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.