Agent WranglersLayout and scripts
Build layouts that grow with the longest translation, test them in a pseudo-locale, and support right-to-left, mixed-direction and vertical text.
- Recommended 4
- Optional 1
Recommended
Let every layout grow with the longest translation
LOC-30Give 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.
Test with a pseudo-locale
LOC-14When 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.
Support right-to-left text
LOC-9Support right-to-left languages with
dir, logical CSS properties anddir="auto"on user input.Isolate inserted text from the text around it
LOC-31Wrap every inserted value whose direction you do not know, such as a user name or a product title, in a direction isolate. Use
<bdi>ordir="auto"in HTML, and the Unicode isolate characters in plain text.
Optional
Support vertical and CJK text
LOC-10Where Chinese, Japanese or Korean (CJK) text appears, support vertical writing and their line breaking with
writing-modeand the right line-break rules.
For agents: this playbook is free to use under CC 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.