---
title: "Support right-to-left text · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/languages-and-regions/rtl-support
updated: 2026-10-20
licence: "All rights reserved"
---

# Support right-to-left text

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Languages and regions](https://agentwranglers.se/playbook/website/languages-and-regions)
- Rule: Support right-to-left languages with `dir`, logical CSS properties and `dir="auto"` on user input.
- 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.
- Check: Load a page with `dir="rtl"`. Nothing overlaps or scrolls sideways, and icons that point a direction are mirrored.

Example:

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

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

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/languages-and-regions/rtl-support`.

- Previous: [Let people pick their language](https://agentwranglers.se/playbook/website/languages-and-regions/language-switcher)
- Next: [Support vertical and CJK text](https://agentwranglers.se/playbook/website/languages-and-regions/writing-modes)
- [Languages and regions](https://agentwranglers.se/playbook/website/languages-and-regions)