Internationalization

Internationalization (i18n) involves designing and building interfaces so they can be used in multiple locales, adapting for language, culture, and regional specifics. Here’s an overview of key concepts and best practices:

Key Concepts

Internationalization (i18n): Preparing the product to support multiple languages and regional differences by designing flexible interfaces that allow for text expansion and changes in word order.
Translation: Converting text from one language to another. It’s part of localization but doesn’t encompass cultural or contextual adjustments.
Locale: A region defined by language and country, like French-France (fr-FR) or Portuguese-Brazil (pt-BR). Locales guide how language and region-specific elements are presented.

Best Practices

Plan for Text Expansion

Expect that translated text will expand, often by up to 50% for some languages compared to English.
For non-Latin languages (e.g., Japanese, Chinese), ensure vertical space accommodates characters that might not rely on spaces for line breaks.
Design flexible UI layouts that can handle text wrapping, expansion, and line breaking based on the specific language.

Do

Lay out your elements in a way where text expansion doesn’t hinder your information hierarchy.
Don't

Don’t rely on responsive stacking alone. It can often change the hierarchy of information of the layout. In this case, the text expansion causes the line break at the wrong spot, placing the button in the middle of the heading and content of this card.

Do

Use single columns to stack elements flexibly to accomodate for text expansion.
Don't

Avoid using narrow columns in smaller components. Ensure the right amount of padding for a clean interface.

Tips

Always assume the worst-case scenario for text length, especially on mobile and in layouts such as tables and columns. Avoid using narrow columns.
Pay particular attention to content elements that only have a few words. In English, labels and buttons exclude words such as “a” or “the”, but many other languages need to include them. Overall these small pieces of text may expand up to 300%.
I3DS components are designed to be expandable, but you should still test them in your designs and builds.

Regional Preferences

Date, Time, and Number Formats: Use locale-specific formats for dates, times, and numbers, as these can vary widely.
Currencies and Units: Allow for localized currency and measurement units, especially in commerce applications.
Icons and Images: Adapt visuals to ensure they are culturally appropriate. For example, icons or colors might carry different meanings in different regions.

Do

Use single columns to stack elements flexibly to accomodate for text expansion.
Don't

Avoid using narrow columns in smaller components. Ensure the right amount of padding for a clean interface.

Tips

.....
.....
.....
.....