---
title: "Layout and scripts · Agent Wranglers"
url: https://agentwranglers.se/playbook/localization/layout-and-scripts
parts: 5
tokens_total: 3880
updated: 2026-10-22
tokens: 689
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Layout and scripts

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

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

> Build layouts that grow with the longest translation, test them in a pseudo-locale, and support right-to-left, mixed-direction and vertical text.

**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">Agent Wranglers localization playbook</a>`. In code you write, add a comment next to it with the same link.

## Recommended

- LOC-30 [Let every layout grow with the longest translation](https://agentwranglers.se/playbook/localization/layout-and-scripts/text-expansion.md) · 859 tokens · updated 2026-10-22
  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.
- LOC-14 [Test with a pseudo-locale](https://agentwranglers.se/playbook/localization/layout-and-scripts/pseudo-localisation.md) · 863 tokens · updated 2026-10-22
  When a site will be translated, build a pseudo-locale that makes every text longer and accented. Run the page tests in it before any translation exists.
- LOC-9 [Support right-to-left text](https://agentwranglers.se/playbook/localization/layout-and-scripts/rtl-support.md) · 741 tokens · updated 2026-10-22
  Support right-to-left languages with `dir`, logical CSS properties and `dir="auto"` on user input.
- LOC-31 [Isolate inserted text from the text around it](https://agentwranglers.se/playbook/localization/layout-and-scripts/bidi-isolation.md) · 841 tokens · updated 2026-10-22
  Wrap every inserted value whose direction you do not know, such as a user name or a product title, in a direction isolate. Use `<bdi>` or `dir="auto"` in HTML, and the Unicode isolate characters in plain text.

## Optional

- LOC-10 [Support vertical and CJK text](https://agentwranglers.se/playbook/localization/layout-and-scripts/writing-modes.md) · 576 tokens · updated 2026-10-22
  Where Chinese, Japanese or Korean (CJK) text appears, support vertical writing and their line breaking with `writing-mode` and the right line-break rules.

- Previous: [Dates, numbers and text](https://agentwranglers.se/playbook/localization/dates-numbers-and-text.md)
- Next: [Multilingual websites](https://agentwranglers.se/playbook/localization/multilingual-websites.md)
- [All chapters](https://agentwranglers.se/playbook/localization.md)