Set `dir="rtl"` on the root element for languages that read right-to-left (Arabic, Hebrew, Persian). The browser flips text alignment, scroll, and form controls automatically. Use `dir="auto"` to let user-generated text decide per-block.
HTML
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>مرحبا بالعالم</title>
</head>
<body>
<h1>مرحبا بالعالم</h1>
<p>هذا نص باللغة العربية. هذا النص محاذاة لليمين تلقائيا.</p>
<!-- Mix LTR content inside an RTL page -->
<p dir="ltr">This paragraph is forced LTR even on an RTL page.</p>
<!-- Let the browser auto-detect for user-generated content -->
<p dir="auto">Some user typed this — could be ltr or rtl.</p>
<!-- For just an inline run, use <bdi> (bidi-isolate) -->
<p>User <bdi>أحمد</bdi> wrote a comment.</p>
</body>
</html>
<!-- CSS logical properties make styling work in both directions:
margin-inline-start vs. margin-left
padding-inline-end vs. padding-right
border-inline-start vs. border-left
text-align: start vs. text-align: left
Use these and the page flips correctly when dir changes. -->Save your own code snippets
Create a free account and build your private vault. Share publicly whenever you want.