Let every layout grow with the longest translation

How to do it

The W3C quotes average growth from English of 200 to 300% for texts up to 10 characters, and about 130% for texts over 70. Short labels such as buttons and tabs grow the most. Let containers wrap and grow, with min-width instead of width and no fixed heights on text. On mobile, use wrap-content sizes and Auto Layout instead of fixed frames. Where space is fixed, such as a tab bar, give translators the limit as Give translators context and a review step says. Find the longest translation per key with a script, and test with it as Test with a pseudo-locale says.

Examples

JavaScript example

export function longestLocale(catalogs) {
  const longest = {};
  for (const messages of Object.values(catalogs))
    for (const [key, text] of Object.entries(messages))
      if (!longest[key] || text.length > longest[key].length) longest[key] = text;
  return longest;
}

Python example

def longest_locale(catalogs: dict[str, dict[str, str]]) -> dict[str, str]:
    longest: dict[str, str] = {}
    for messages in catalogs.values():
        for key, text in messages.items():
            if len(text) > len(longest.get(key, "")):
                longest[key] = text
    return longest

CSS example

.tab-label { min-inline-size: 6rem; overflow-wrap: anywhere; }

How to check

The browser or UI tests run once in a locale built from the longest translation of every key, at phone width. No text is cut off, overlaps or scrolls sideways.

Sources

• W3C Internationalization (Text size in translation)

Related rules

• LOC-21 Give translators context and a review step in Localization
• LOC-14 Test with a pseudo-locale in Localization