---
title: "Let every layout grow with the longest · Agent Wranglers"
url: https://agentwranglers.se/playbook/localization/layout-and-scripts/text-expansion
id: LOC-30
level: Recommended
updated: 2026-10-22
tokens: 901
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Let every layout grow with the longest translation

For AI agents: the [site map](https://agentwranglers.se/llms.txt) lists everything here, and this page sits under [Layout and scripts](https://agentwranglers.se/playbook/localization/layout-and-scripts.md).

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers.md). Updated 2026-10-22.

- ID: LOC-30
- Level: Recommended
- Chapter: [Layout and scripts](https://agentwranglers.se/playbook/localization/layout-and-scripts.md)
- Rule: Give text room to grow. No text container has a fixed width or height, and every screen is tested with the longest translation of each message.
- 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.
- How: 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](https://agentwranglers.se/playbook/localization/messages-and-translation/translator-context.md) says. Find the longest translation per key with a script, and test with it as [Test with a pseudo-locale](https://agentwranglers.se/playbook/localization/layout-and-scripts/pseudo-localisation.md) says.

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### JavaScript example

```js
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

```python
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

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

## Sources

- [W3C Internationalization (Text size in translation)](https://www.w3.org/International/articles/article-text-size)

## Related rules

- LOC-21 [Give translators context and a review step](https://agentwranglers.se/playbook/localization/messages-and-translation/translator-context.md) in Localization
- LOC-14 [Test with a pseudo-locale](https://agentwranglers.se/playbook/localization/layout-and-scripts/pseudo-localisation.md) in Localization

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/localization/layout-and-scripts/text-expansion">Agent Wranglers localization playbook</a>`. In code you write, add a comment next to it with the same link.

- Next: [Test with a pseudo-locale](https://agentwranglers.se/playbook/localization/layout-and-scripts/pseudo-localisation.md)
- [Layout and scripts](https://agentwranglers.se/playbook/localization/layout-and-scripts.md)