Glossary / Translation expansion
Translation expansion
Translation expansion is the common increase in text length when content is translated from a compact source language into another language. It can break buttons, menus, dialogs, table columns, validation messages, and mobile layouts that were sized for English. Some translations contract or use different word order, so designing for a fixed percentage is not enough; layouts need to adapt to real strings, scripts, and user text.
What to know
- Expansion varies by source length, language pair, terminology, context, and translator choices. Short labels may expand proportionally more than long paragraphs.
- Fixed widths, fixed heights,
white-space: nowrap, truncation, absolute positioning, and image-based text are common causes of clipped translations. - Translations can change grammar and order; avoid concatenated fragments and assume all labels can be translated independently.
- Pseudo-localization can add accents, markers, and length to reveal hard-coded strings and layout assumptions before translations arrive.
- Flexible layout does not mean unlimited: define sensible max widths, wrapping, overflow behavior, and responsive breakpoints.
- Test text scaling and zoom in addition to localization, because both increase effective content size.
- Ensure expansion does not hide focus indicators, buttons, error details, or adjacent controls; maintain target size and reading order.
Engineering practice
Use content-driven sizing (min-width: 0, min-height, minmax, wrapping, flex/grid constraints) and allow buttons to grow or wrap when appropriate. Avoid cropping meaningful text; if truncation is unavoidable, provide a discoverable complete value and test keyboard/screen-reader access. Include long locale fixtures in component visual tests and test the longest real translations in end-to-end flows. Give translators context and keep strings in resource catalogs.
Interview questions
- How do you catch expansion defects early? Pseudo-localization, long-string fixtures, flexible component sizing, and locale-specific visual regression tests.
- Why not assume a fixed expansion factor? Expansion differs across languages and strings, and grammar/order can change as well as length.
- Should UI labels be truncated? Only when justified; preserve complete information through an accessible, discoverable alternative and avoid truncating instructions or errors.
- What CSS patterns help? Content sizing, wrapping, logical properties, responsive grids, and avoiding fixed heights/nowrap assumptions.
- What else besides translation creates overflow? Zoom, text spacing, user font settings, dynamic content, and accessibility preferences.