LOC-9Recommended

Support right-to-left text

Support right-to-left languages with dir, logical CSS properties and dir="auto" on user input.

By Agent Wranglers. Updated 22 October 2026.

How to do it

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.

Examples

HTML example

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

CSS example

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

How to check

Load a page with dir="rtl". Nothing overlaps or scrolls sideways, and icons that point a direction are mirrored.

Sources

WEB-138 Give instructions that work without seeing the page in Website
EML-5 Declare the language and text direction in Email
LOC-31 Isolate inserted text from the text around it in Localization
LOC-10 Support vertical and CJK text in Localization

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