Logical properties

We are used to margin-left and padding-top — these are physical properties, tied to the sides of the screen. But in Arabic and Hebrew text runs from right to left, and Japanese can be vertical. Logical properties are tied to the text direction: "the start of the line" ends up on the right or on the left, as the language needs.

Two axes: inline and block

Logical properties have their own coordinate system:

• inline — the direction of a line. In English and Russian it is left to right;
• block — the direction in which paragraphs and blocks follow each other. Usually top to bottom.

Each axis has a start (start) and an end (end). So instead of "margin on the left" we say "margin at the start of the line" — margin-inline-start.

What it looks like

The dir="rtl" attribute switches the text direction to right to left. Compare two identical blocks:

<style>
  .note { margin-bottom: 8px; padding: 8px; padding-inline-start: 40px; background: lavender; border-inline-start: 4px solid rebeccapurple; }
</style>
 
<div class="note">Normal direction: the bar and the padding on the left</div>
<div class="note" dir="rtl">Right to left: the bar and the padding on the right</div>

The CSS is the same, but the bar and the padding moved to the other side by themselves.

Matching properties

padding-*, border-* and other properties with sides work the same way.

Shorthands

The handiest are logical shorthands for two sides at once. margin-inline: auto centers a block, padding-block: 8px sets the padding at the top and bottom:

<style>
  .box { max-inline-size: 300px; margin-inline: auto; padding-block: 8px; padding-inline: 16px; background: honeydew; }
</style>
 
<div class="box">Centered, 8px padding at the top and bottom, 16px at the sides</div>

These shorthands are useful even on an English-only site: padding-inline is shorter and clearer than padding: 0 16px with remembering the order of sides.

Vertical text

The writing-mode property turns the direction of writing. Logical properties turn together with it:

<style>
  .tag { writing-mode: vertical-rl; padding-block: 12px; padding-inline: 4px; background: gold; }
</style>
 
<span class="tag">A vertical label</span>

Here padding-block gave padding on the left and right — the block axis is horizontal now. This is how labels on book spines and side tabs are made.

Common mistake

Physical properties in an interface that is translated into Arabic or Hebrew. An icon is separated from the text with margin-right, and in right-to-left direction the gap ends up on the wrong side:

<style>
  .bad .icon { margin-right: 12px; }
  .good .icon { margin-inline-end: 12px; }
  p { margin: 4px 0; }
</style>
 
<p class="bad" dir="rtl"><span class="icon">★</span>margin-right: the text sticks to the star</p>
<p class="good" dir="rtl"><span class="icon">★</span>margin-inline-end: the gap is in place</p>

Write new styles with logical properties — they work in any text direction.