Support right-to-left text

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

By Erik Bergstedt, Agent Wranglers. Updated 20 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.

Example

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

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

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.