CSS Academy · Lesson

Logical Properties in RTL Layouts

Build a truly bidirectional layout that automatically flips for Arabic and Hebrew using logical properties.

Setting Up RTL in HTML

Declare RTL in HTML with the dir attribute and matching lang:

<html lang="ar" dir="rtl">
  <!-- All logical properties adapt automatically -->

You can also set direction in CSS — useful for testing or partial RTL sections:

[dir="rtl"] {
  direction: rtl;
}