direction
Set a local base direction while keeping semantic direction in HTML.
Overview
| Class | Declarations |
|---|---|
direction:ltr | direction: ltr;
|
direction:rtl | direction: rtl;
|
Examples
Set left-to-right direction
direction:ltr sets a local left-to-right base direction. This block resets the inherited RTL direction; its logical start moves to the left.
<!-- RTL parent · LTR paragraph --><section dir="rtl"> <p id="target" lang="en" class="w:240px max-w:100% m:0 font-md leading:24px text-start direction:ltr">Invoice #1048</p></section>Generated CSS
@layer utilities { .direction\:ltr { direction: ltr }}Set right-to-left direction
direction:rtl sets the base direction of this Arabic paragraph. It changes inline ordering and logical alignment, rather than reversing the source string.
<!-- A local right-to-left paragraph --><p id="target" lang="ar" class="w:240px max-w:100% m:0 font-md leading:24px text-start direction:rtl">مرحبًا بكم في مساحة التصميم</p>For content whose direction is known, express that meaning with the HTML dir attribute.
Prefer semantic document direction
Use HTML dir for document and user-content direction. This RTL section contains a complete LTR code block; display:block gives the CSS exception its own paragraph context.
<!-- Semantic RTL content · local code exception --><section dir="rtl" lang="ar"> <p class="font-md leading:24px">ثبّت الحزمة لبدء المشروع.</p> <code id="target" lang="en" class="block font-mono font-sm leading:24px text-start direction:ltr">npm install @master/css</code></section>For an embedded inline identifier, <bdi dir="ltr"> can isolate the run. Setting direction on an ordinary inline span alone does not establish that isolation.
Apply conditionally
This diagnostic comparison switches the same mixed-direction line from LTR to RTL at sm on screen. Real content should choose direction by meaning, not viewport width.
<!-- Mixed scripts · actual base direction --><p id="target" class="w:240px max-w:100% m:0 font-md leading:24px text-start direction:ltr direction:ltr@print direction:rtl@screen@sm">Design · <span lang="ar">مرحبًا</span> · 2026</p>Print restores LTR for this comparison. Use semantic dir for language-dependent content in production.