Understanding inline and block axes in different writing modes
Using logical properties for internationalization-friendly CSS
Replacing physical properties (top, right, bottom, left) with logical equivalents
How logical properties adapt automatically to LTR, RTL, and vertical writing modes
Using logical values like start and end for text alignment
Building truly international websites without separate stylesheets
Introduction to Logical Properties
Logical properties provide a way to write CSS that automatically adapts to different writing directions
(left-to-right, right-to-left) and writing modes (horizontal, vertical). Instead of referring to physical
directions like left or right, logical properties refer to the start and
end of the inline and block axes.
This is crucial for internationalization. A website in English (LTR) and Arabic (RTL) can use the same
CSS with logical properties, and the layout will automatically flip appropriately. No need for separate
RTL stylesheets or complex overrides.
Understanding Inline and Block Axes
Every writing system has two axes: the inline axis (direction text flows within a line)
and the block axis (direction lines stack). In English, inline is horizontal (left-to-right)
and block is vertical (top-to-bottom). In traditional Japanese, inline is vertical and block is horizontal.
Horizontal Writing (English, Spanish, French)
Inline axis: Horizontal (left → right in LTR, right → left in RTL)
Block axis: Vertical (top → bottom)
Vertical Writing (Traditional Japanese, Chinese)
Inline axis: Vertical (top → bottom)
Block axis: Horizontal (typically right → left)
Visual Demonstration:
Margin: Physical vs Logical
Physical margin properties (margin-left, margin-right) always refer to the
same physical direction, regardless of writing mode. Logical margin properties adapt to the writing direction.
Syntax
/* ❌ Physical properties - don't adapt to direction */
.box {
margin-left: 2rem;
margin-right: 0.5rem;
}
/* ✅ Logical properties - adapt automatically */
.box {
margin-inline-start: 2rem; /* Start of inline axis */
margin-inline-end: 0.5rem; /* End of inline axis */
}
Example
<div class="box">
This box has logical margins that adapt to writing direction.
</div>
Padding follows the same pattern as margin. Use padding-block and padding-inline
to create padding that adapts to writing mode.
Syntax
.card {
padding-block: 1.5rem; /* top and bottom in horizontal writing */
padding-inline: 2rem; /* left and right in LTR, reversed in RTL */
}
/* Or individually */
.card {
padding-block-start: 1rem;
padding-block-end: 2rem;
padding-inline-start: 1.5rem;
padding-inline-end: 1.5rem;
}
Rendered Result:
Border: Logical Properties
Borders can also use logical properties, including border radius corners which use compound logical
directions (e.g., border-start-start-radius for the corner at the start of both axes).
Syntax
.sidebar {
border-inline-end: 3px solid gray; /* Right border in LTR, left in RTL */
}
/* Border radius with logical properties */
.card {
border-start-start-radius: 8px; /* Top-left in LTR horizontal */
border-start-end-radius: 8px; /* Top-right in LTR horizontal */
border-end-start-radius: 8px; /* Bottom-left in LTR horizontal */
border-end-end-radius: 8px; /* Bottom-right in LTR horizontal */
}
When using absolute or fixed positioning, logical inset properties replace top, right,
bottom, and left. The inset shorthand is particularly useful.
Syntax
.positioned {
position: absolute;
/* ❌ Physical */
top: 1rem;
right: 1rem;
/* ✅ Logical */
inset-block-start: 1rem; /* top in horizontal writing */
inset-inline-end: 1rem; /* right in LTR, left in RTL */
}
/* Shorthand */
.positioned {
inset: 10px 20px; /* block inline */
inset-block: 10px 20px; /* start end */
inset-inline: 10px 20px; /* start end */
}
Rendered Result:
Size Properties
Width and height have logical equivalents: inline-size and block-size.
In horizontal writing, inline-size is width and block-size is height. In vertical writing, they swap.
Instead of text-align: left or right, use start and end
which adapt to the writing direction. In LTR, start is left and end is right. In RTL, they flip.
Here's a practical demonstration showing how the same CSS with logical properties creates proper layouts
in both left-to-right (English) and right-to-left (Arabic) languages.
The writing-mode property changes how text flows. Logical properties automatically
adapt to the writing mode, making them essential for supporting vertical text in languages like
traditional Japanese and Chinese.
Writing Mode Values
/* Horizontal, top to bottom (default, English) */
writing-mode: horizontal-tb;
/* Vertical, right to left (traditional Japanese, Chinese) */
writing-mode: vertical-rl;
/* Vertical, left to right */
writing-mode: vertical-lr;