Skip to content
UX Atlas
Plate WRT·006 · UX writingGrid E1 · Rev. 2026-08-14

Internationalization

Designing so the product can be adapted to other languages and regions without being rebuilt.

UX writingCraft conventionAdvanced

Definition

Internationalization is the preparation work that makes localisation possible: flexible layout, externalised strings, locale-aware formatting and correct bidirectional support. Localisation is the adaptation itself.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2What breaks first
  3. 3Design and build practices
  4. 4Designing for text that will change
  5. 5In practice
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Any product that might operate in more than one market.
  • Designing form fields for names and addresses.
  • Before the first translation, not after.

Common mistakes

  • Layouts sized to English strings.
  • Concatenated sentence fragments.
  • Hard-coded date and number formats.
  • RTL treated as a mirror of the CSS rather than a layout mode.
  • Treating internationalisation as a translation task rather than a set of layout and formatting decisions made long before any translation exists.

What breaks first

AssumptionReality
Text length is stableGerman and Finnish commonly run 30 percent longer than English. Short UI labels can double.
Text runs left to rightArabic, Hebrew, Persian and Urdu are right to left, and the whole layout mirrors.
Names have two partsName structure varies enormously. A single free text field is safer.
Dates are numericOrder varies by locale. 03/04 is ambiguous worldwide.
Addresses have a fixed shapeField order, presence and naming differ by country.
One space-separated word orderConcatenating translated fragments produces broken grammar. Use full sentences with placeholders.
Colour meanings are sharedRed and green carry different meanings in different markets.

Design and build practices

  • Design with the longest plausible translation, not the English string.
  • Use logical CSS properties, such as margin-inline-start, so layouts mirror automatically under RTL.
  • Never concatenate sentence fragments. Provide the full sentence with named placeholders.
  • Use the platform's formatting APIs, such as Intl in JavaScript, for dates, numbers, currency and plurals.
  • Support locale plural rules rather than a simple singular and plural pair.
  • Give translators context: where the string appears and what it means.
  • Test with pseudo-localisation, which expands strings and adds accents, before any real translation exists.

Designing for text that will change

Do

  • Leave room for text to grow by a third, which is typical for German from English.
  • Let containers grow vertically rather than truncating.
  • Use logical properties, so layouts mirror correctly in right-to-left languages.
  • Format dates, numbers and currencies through the locale rather than by hand.

Do not

  • Build sentences by concatenating fragments, which is untranslatable.
  • Put text in images.
  • Assume word order, plural rules or name order match your own.
  • Size a button to fit exactly the English label.

In practice

  1. i.

    The button that fit in English

    Text expansion

    A control sized to its English label broke in four languages at once. Designing the layout against the longest supported translation, not the shortest, is what prevents an entire class of release-day bug.

Local chart

WRT·006 · Region III · Grid E1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Match Between System and the Real WorldHEUR·002 · PRINCIPLES BEHIND THISPostel's LawLAW·012 · PRINCIPLES BEHIND THISNatural MappingPRIN·008 · PRINCIPLES BEHIND THISEdge CaseTERM·120 · SHORT DEFINITIONInternationalization (i18n)TERM·135 · SHORT DEFINITIONLocalisation (l10n)TERM·136 · SHORT DEFINITIONRight-to-Left (RTL)TERM·137 · SHORT DEFINITIONUI to UX WritingAI·006 · RELATED CONCEPTAvatarCMP·024 · RELATED CONCEPTDate PickerCMP·009 · RELATED CONCEPTText InputCMP·003 · RELATED CONCEPTActivity TimelinesPAT·019 · RELATED CONCEPT

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  1. [1]

    Intl object

    MDN Web Docs

  2. [2]

    Personal names around the world

    W3C Internationalization

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A CheckoutA Data TableA FormA Mobile AppAn Ecommerce ExperienceNavigation

Principles behind this

The reasoning this solution is an application of.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.