---
title: "Support right-to-left text · Agent Wranglers"
url: https://agentwranglers.se/playbook/localization/layout-and-scripts/rtl-support
id: LOC-9
level: Recommended
updated: 2026-10-22
tokens: 790
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Support right-to-left text

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-9
- Level: Recommended
- Chapter: [Layout and scripts](https://agentwranglers.se/playbook/localization/layout-and-scripts.md)
- Rule: Support right-to-left languages with `dir`, logical CSS properties and `dir="auto"` on user input.
- Check: Load a page with `dir="rtl"`. Nothing overlaps or scrolls sideways, and icons that point a direction are mirrored.
- How: Use logical properties such as `margin-inline-start`, which flip with the text direction. Set `dir` per language, and `dir="auto"` on inputs and on user text shown on the page. A site with no right-to-left language still adds `dir="auto"` to user input and user text. In email, follow [Declare the language and text direction](https://agentwranglers.se/playbook/email/message-basics/language-and-direction.md).

## 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.

### HTML example

```html
<html lang="ar" dir="rtl">
<input name="comment" dir="auto">
```

### CSS example

```css
.card { margin-inline-start: 1rem; padding-inline: 1rem 2rem; border-inline-start: 4px solid var(--brand); }
```

## Sources

- [HTML Standard (The dir attribute)](https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute)
- [W3C CSS Logical Properties and Values Level 1](https://www.w3.org/TR/css-logical-1/)

## Related rules

- EML-5 [Declare the language and text direction](https://agentwranglers.se/playbook/email/message-basics/language-and-direction.md) in Email
- LOC-31 [Isolate inserted text from the text around it](https://agentwranglers.se/playbook/localization/layout-and-scripts/bidi-isolation.md) in Localization
- LOC-10 [Support vertical and CJK text](https://agentwranglers.se/playbook/localization/layout-and-scripts/writing-modes.md) in Localization
- AXS-10 [Give instructions that work without seeing the page](https://agentwranglers.se/playbook/accessibility/seeing-and-reading/sensory-characteristics.md) in Accessibility

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

- Previous: [Test with a pseudo-locale](https://agentwranglers.se/playbook/localization/layout-and-scripts/pseudo-localisation.md)
- Next: [Isolate inserted text from the text around it](https://agentwranglers.se/playbook/localization/layout-and-scripts/bidi-isolation.md)
- [Layout and scripts](https://agentwranglers.se/playbook/localization/layout-and-scripts.md)