direction
Sets the text direction. drlis left-to-right (default), drrplaces text right-to-left, used for Arabic or Hebrew content.
Class List
| Class | CSS | Description |
|---|---|---|
drl | direction: ltr | left right (default value) |
drr | direction: rtl | Right to left (Arabic, Hebrew) |
Visual Comparison
Compares how text and layout element directions differ.
LTR (default value) — drl
Hello World - Text direction test
Text and elements arranged left to right
RTL — drr
Hello World - Text direction test
Text and elements arranged right to left
Class Details
drldirection: ltr
Places text in left-to-right (LTR) direction. The default for most languages including Korean, English, and Chinese.
<!-- Default LTR (most languages) -->
<div class="drl">
This text reads left to right.
</div>
<!-- Restore LTR within RTL area -->
<div class="drr">
<p>محتوى عربي</p>
<div class="drl">This part is restored to LTR</div>
</div>drrdirection: rtl
Places text in right-to-left (RTL) direction. Used for Arabic and Hebrew content. Also affects text alignment and flex/grid placement order.
<!-- RTL text area -->
<div class="drr p2rem bg18181B br8px">
<p>مرحبا بالعالم - أهلا وسهلا</p>
</div>
<!-- RTL Navigation -->
<nav class="drr df gap2rem p16px">
<a href="#">الرئيسية</a>
<a href="#">حول</a>
<a href="#">اتصل</a>
</nav>Effect on layout
drraffects not only text but also flex item order, scroll direction, and margin/padding direction. For a full RTL layout, use <html dir="rtl">.
Tips & Notes
HTML dir attribute takes priority
When changing the direction of an entire page, using the HTML dir="rtl" attribute is recommended over CSS. Use CSS for partial direction changes.
Bidirectional text (Bidi)
When LTR and RTL text coexist on a page, apply drl or drrindividually to each section.