0Pricing
CSS Academy · Lesson

Logical Properties in RTL Layouts

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

Logical Properties in RTL Layouts is a free CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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

dir="rtl" in CSS

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

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

Testing LTR/RTL Toggle

A quick test: add dir="rtl" to <html>. With logical properties, the layout should mirror correctly. With physical properties, you will see what needs fixing.

What Automatically Adapts

When dir="rtl" is set, these things flip automatically with logical properties:

  • Text alignment (start/end)
  • Margins and paddings (inline-start/end)
  • Borders (inline-start/end)
  • Floats (inline-start/end)
  • Positioning (inset-inline-start/end)

What Does NOT Adapt Automatically

Even with logical properties, these need attention in RTL:

  • Background images with directional content
  • SVG icons that are directionally meaningful (arrows, chevrons)
  • Transforms like translateX() — use translateX(calc(-1 * var(--offset))) with a direction flag
  • Absolute positioning with explicit pixel values

Mirroring SVG Icons

CSS provides a clean way to flip directional icons in RTL:

[dir="rtl"] .icon-arrow {
  transform: scaleX(-1);
}

CSS Direction-Aware Variable

A CSS variable trick for direction-aware values:

:root { --start: 1; }
[dir="rtl"] { --start: -1; }

.drawer {
  transform: translateX(calc(var(--start) * -100%));
  /* slides from correct side in both LTR and RTL */
}

Practical RTL Example

A card component using logical properties:

.card {
  display: flex;
  flex-direction: row;
  padding-inline: 24px;
  padding-block: 16px;
  border-inline-start: 4px solid royalblue;
  gap: 16px;
}

.card__icon {
  /* No mirroring needed — purely decorative */
}

.card__text {
  text-align: start;
}

font-size and RTL

Some Arabic fonts appear larger or smaller at the same pixel size as Latin equivalents. Define font-size per writing system if needed:

:root { font-size: 16px; }
[lang="ar"] { font-size: 17px; /* Arabic slightly larger */ }

Testing Tools

Browser DevTools can emulate bidirectional layouts. Also use Chrome's accessibility tree to verify reading order follows the logical order rather than visual order for screen readers.

Real-World RTL Checklist

RTL review checklist:

  • All margins/paddings use logical properties
  • All borders use inline-start/end
  • Text alignment uses start/end
  • Directional icons are flipped with scaleX(-1)
  • Absolute positions use inset-inline-* where needed
  • Scrollable containers scroll from correct edge

Quick Check

Which CSS transform is the simplest way to mirror a directional SVG arrow icon in RTL layouts?

Recap

Set dir="rtl" on the html element for RTL layout. Logical properties adapt margins, padding, borders, and alignment automatically. Physical pixels in transforms and absolute positioning still need manual RTL consideration. Mirror directional icons with scaleX(-1). Test by toggling dir="rtl" on your root element.

Frequently asked questions

Is the “Logical Properties in RTL Layouts” lesson free?

Yes — the full text of “Logical Properties in RTL Layouts” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Logical Properties in RTL Layouts”?

Build a truly bidirectional layout that automatically flips for Arabic and Hebrew using logical properties. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Logical Properties in RTL Layouts” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Why Logical Properties: Internationalization
  2. Block and Inline Directions
  3. Logical Margin Padding and Border
  4. Logical Properties in RTL Layouts
← Back to CSS Academy