Rethinking CSS direction with logical properties
Cross-browser support for CSS logical properties has reached a tipping point, making now a practical time to understand how they work. Logical properties and values replace physical directions like left, right, top, and bottom with flow-relative terms that adapt to the writing mode and direction of the content. That makes them essential for multilingual sites, but even for English-only projects they offer useful shorthand.
Consider a common centering pattern. The classic approach is verbose:
.thing {
margin-left: auto;
margin-right: auto;
}One alternative is margin: 0 auto;, but that also applies top and bottom margins. With logical properties, you can target just the inline direction — the left and right sides in a horizontal writing mode — using margin-inline.
Thinking in inline and block terms
The margin-inline property sets both margin-left and margin-right. Its counterpart, margin-block, sets margin-top and margin-bottom. This pattern extends to padding and border as well. For instance, border-inline applies borders to both the left and right sides without touching the top or bottom:
The inline direction maps to left and right in horizontal writing modes; the block direction maps to top and bottom. But those mappings shift when the writing mode changes — which is exactly the point.
Direction, writing mode, and why context matters
Traditional CSS properties were designed around English, which is written left-to-right and top-to-bottom. Other languages differ. Arabic reads right-to-left, which is why HTML offers the dir attribute:
<html dir="rtl">CSS mirrors this with the direction property, though using the HTML attribute is recommended in case the CSS fails to load:
.foreign-language { direction: rtl; }
Chinese, Japanese, Korean, and Mongolian can be written either horizontally (left-to-right) or vertically (top-to-bottom). While the majority of websites in those languages render horizontally like English text, vertical writing is common on Japanese sites, often mixed with horizontal text.
In vertical writing, Chinese, Japanese, and Korean start at the top-right corner, while Mongolian runs left-to-right. That variety is why CSS has the writing-mode property with three core values:
horizontal-tb: The default, handling left-to-right languages like English or French and right-to-left languages like Arabic. Thetbstands for "top-to-bottom."vertical-rl: Sets a right-to-left vertical orientation for languages like Chinese, Japanese and Korean.vertical-lr: For vertical left-to-right languages like Mongolian.
With logical properties, spacing and layout are contextual: they depend on both writing-mode and direction, whether set via CSS or HTML. This makes it possible to reuse CSS across languages. Organizations like BBC News, which rebuild their site in more than a dozen languages, maintain the same visual styling across regions without duplicating rules per language.
Physical properties cause concrete problems in this scenario. Using margin-left in English, for example, works fine. But if the same CSS is reused in a right-to-left context, the margin ends up on the wrong side — space appears where it shouldn't — while the text crowds the icon it should be separated from. Logical properties avoid this entirely:
In a left-to-right language like English, margin-inline-start sets the left margin. In a right-to-left language such as Arabic, Urdu, or Hebrew, it sets the right margin, solving the layout problem shown above. With vertical text, the same property adds space at the top — where reading begins in any vertical language. The inline direction itself changes based on the element's writing-mode: when a vertical mode is active, inline handles top and bottom.
A full mapping of logical properties
Dozens of CSS properties have logical equivalents. The tables below show physical properties on the left and their logical counterparts on the right, assuming a left-to-right horizontal mapping. Remember, however, that the logical versions change with context. These mappings use the ltr direction and horizontal-tb writing mode.
Sizing
In a horizontal writing mode, inline-size sets width and block-size sets height. In a vertical writing mode, those swap: inline-size controls height and block-size controls width.
| Physical property | Logical property |
|---|---|
width | inline-size |
max-width | max-inline-size |
min-width | min-inline-size |
height | block-size |
max-height | max-block-size |
min-height | min-block-size |
Logical sizing properties enjoy good cross-browser support.
Borders
Logical border properties have solid support across modern browsers.
| Physical property | Logical property |
|---|---|
border-top | border-block-start |
border-bottom | border-block-end |
border-left | border-inline-start |
border-right | border-inline-end |
Logical properties also exist for border style, width, and color individually:
| Physical property | Logical property |
|---|---|
border-top-color | border-block-start-color |
border-top-width | border-block-start-width |
border-top-style | border-block-start-style |
Shorthand logical border properties are also available:
| Physical property | Logical property |
|---|---|
border-top and border-bottom | border-block |
border-left and border-right | border-inline |
Margin
All individual logical margin properties are:
| Physical property | Logical property |
|---|---|
margin-top | margin-block-start |
margin-bottom | margin-block-end |
margin-left | margin-inline-start |
margin-right | margin-inline-end |
These have comprehensive modern support, including Samsung Internet, with Safari coverage since 12.2. Shorthands exist too:
| Physical property | Logical property |
|---|---|
margin-top and margin-bottom | margin-block |
margin-left and margin-right | margin-inline |
Padding
Padding follows the same structure: replace margin with padding for the full set of properties.
| Physical property | Logical property |
|---|---|
padding-top | padding-block-start |
padding-bottom | padding-block-end |
padding-left | padding-inline-start |
padding-right | padding-inline-end |
padding-top and padding-bottom | padding-block |
padding-left and padding-right | padding-inline |
Logical padding properties have solid browser support.
Positioning
Offsets can be declared logically as well:
| Physical property | Logical property |
|---|---|
top | inset-block-start |
bottom | inset-block-end |
left | inset-inline-start |
right | inset-inline-end |
top and bottom | inset-block |
left and right | inset-inline |
In a horizontal writing mode, inset-block-start is equivalent to top and inset-block-end to bottom. For left-to-right direction, inset-inline-start equals left and inset-inline-end equals right. These reverse for right-to-left languages.
In a vertical writing mode with vertical-rl, inset-inline-start is equivalent to top and inset-inline-end to bottom, while inset-block-start maps to right and inset-block-end to left. With vertical-lr, the block mappings swap and inset-block-start equals left.
| Logical property | Writing mode | Equivalent to: |
|---|---|---|
inset-block-start | Horizontal LTR | top |
inset-block-start | Horizontal RTL | top |
inset-block-start | Vertical LTR | left |
inset-block-start | Vertical RTL | right |
Logical positioning properties are supported in all modern browsers, though Safari support is recent only.
A newer shorthand, inset, sets all four offsets — top, right, bottom, and left — in one declaration, which is useful for full-page overlays. Despite what it might look like in DevTools, inset is a shorthand for physical values, not logical properties:
inset: 10px 20px 5px 8px; /* shorthand for physical properties not logical properties */Text alignment
Logical text alignment values have broad browser support. In English, text-align: start equals left and text-align: end equals right. With a rtl direction, they switch: text-align: start aligns right.
| Physical value | Writing mode | Equivalent to: |
|---|---|---|
start | LTR | left |
start | RTL | right |
end | LTR | right |
end | RTL | left |
Border radius
Support for logical border-radius properties is less consistent. The spec also lacks shorthands like border-start-radius or border-end-radius, so the corner-level properties remain the main option:
| Physical property | Logical property |
|---|---|
border-top-left-radius | border-start-start-radius |
border-top-right-radius | border-start-end-radius |
border-bottom-left-radius | border-end-start-radius |
border-bottom-right-radius | border-end-end-radius |
The corner-shape property extends border-radius by setting the type of curvature, and it also supports logical directions:
| Physical value | Logical value |
|---|---|
corner-top-left-shape: scoop | corner-start-start-shape: scoop |
corner-top-right-shape: scoop | corner-start-end-shape: scoop |
corner-bottom-left-shape: scoop | corner-end-start-shape: scoop |
corner-bottom-right-shape: scoop | corner-end-end-shape: scoop |
Corner shorthands that combine corner-shape and border-radius are likewise available:
| Physical value | Logical value |
|---|---|
corner-top: scoop | corner-block-start: scoop |
corner-right: scoop | corner-inline-end: scoop |
corner-bottom: scoop | corner-block-end: scoop |
corner-left: scoop | corner-inline-start: scoop |
corner-top-left: scoop | corner-start-start: scoop |
corner-top-right: scoop | corner-start-end: scoop |
corner-bottom-left: scoop | corner-end-start: scoop |
corner-bottom-right: scoop | corner-end-end: scoop |
Floats
Flow-relative float values lag considerably: the inline-start and inline-end values for float are currently supported only in Firefox.
| Physical value | Logical value |
|---|---|
float: left | float: inline-start |
float: right | float: inline-end |
clear: left | clear: inline-start |
clear: right | clear: inline-end |
Proposed logical properties
Logical properties for overflow and resize are proposed but currently have very poor browser support.
| Physical | Logical |
|---|---|
resize: vertical | resize: block |
resize: horizontal | resize: inline |
overflow-y | overflow-block |
overflow-x | overflow-inline |
Going further
- "RTL Styling 101", by Ahmad Shadeed, covers logical properties and layout considerations for flexbox and grid in Arabic and other right-to-left languages.
- For vertical text, the CSS-Tricks almanac entry on
text-combine-uprightexplains how to rotate and squeeze multiple characters into the space of one.
Examples of real-world vertical typography appear in the Web Awards for Horizontal and Vertical Writings.
Do you need to switch?
There is no urgent reason to drop physical properties from an existing codebase. But now that browser support is essentially universal, there is little reason not to adopt logical properties in new work — even if the project targets only English. They remove a category of layout bugs when content must eventually run in multiple languages or writing modes.
