Logical properties, dir & readable line length

Write CSS for every language

Lesson 16 of 20 · 10 min · Module 5: Pages for every situation

Arabic, Hebrew and Persian are read from right to left. CSS written with left and right only works one way round, while logical properties follow the direction of the text automatically.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Use inline and block instead of left, right, top and bottom
Support right-to-left languages with dir
Limit line length for readability

The idea

Logical properties describe sides by their role: inline is the direction text runs in and block is the direction lines stack in. border-inline-start is the left border in English and the right border in Arabic. max-inline-size: 65ch keeps lines at a comfortable reading length, about 65 characters.

.note {
  border-inline-start: 4px solid #2f6f4e;
  padding-inline: 16px;
  margin-block: 24px;
}

01Inline and block

In English, inline-start is left and block-start is top. In Arabic, inline-start is right. In vertical Japanese text, inline even runs from top to bottom. Logical properties follow the text in every case.

02dir tells the browser

dir="rtl" on an element, or on the html element for a whole page, flips the inline direction. text-align: start then aligns right, and border-inline-start draws on the right.

<html lang="ar" dir="rtl">

/* one rule for both directions */
.note { border-inline-start: 4px solid; }

03A comfortable measure

The ch unit is the width of the "0" character in the current font, so 65ch keeps lines around 65 characters wide whatever the font size. Combined with margin-inline: auto, the text column sits in the middle of the page.

Your turn

1) Give .article max-inline-size: 65ch and margin-inline: auto. 2) Rewrite .quote with logical properties: border-inline-start: 4px solid #2f6f4e, padding-inline: 20px, margin-block: 24px and text-align: start. The Arabic quote, marked with dir="rtl", then gets its border on the right without any extra rule.

What the checks look for

Articles are limited to a readable line length
Articles are centred with margin-inline
The English quote has its border on the left
The Arabic quote has its border on the right
…and no border on the left
The Arabic quote has padding at its start, on the right
Quotes align with the start of their language

Try it in the editor →

Take this with you

Logical properties make one stylesheet work in every writing direction.

Go a little further

Change the whole page to dir="rtl" on the article and check which parts of the layout follow automatically.