Logical CSS properties
This page is a reference for designers writing CSS that works in both text directions. Logical properties name sides by the flow of text (start and end) instead of the screen (left and right).
Contents
Conversion table
| Physical | Logical |
|---|---|
margin-left / margin-right | margin-inline-start / margin-inline-end |
margin-left + margin-right | margin-inline |
padding-left / padding-right | padding-inline-start / padding-inline-end |
left / right (positioned) | inset-inline-start / inset-inline-end |
top / bottom | inset-block-start / inset-block-end |
border-left / border-right | border-inline-start / border-inline-end |
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 |
text-align: left / right | text-align: start / end |
width / height | inline-size / block-size (optional; only matters for vertical writing) |
Left to right, each logical property computes to the same value as the physical one, so converting changes nothing
for left-to-right pages. This is how the administration's stylesheets were converted (components.css, admin4.css,
pagelayout.css, core.css and the module stylesheets).
What has no logical form
| Property | What to do |
|---|---|
float: left / right | float: inline-start / inline-end where supported, or a :where([dir="rtl"]) mirror rule |
four-value margin/padding with different left and right | split into margin-block and margin-inline, or add a mirror rule |
background-position: left ... | a mirror rule |
box-shadow / text-shadow with a horizontal offset | a mirror rule |
transform: translateX() | a mirror rule (negate the value) |
| grid and flex | nothing: they follow the direction already |
A mirror rule follows the rule it mirrors:
.teaser { background-position: left center; }
:where([dir="rtl"]) .teaser { background-position: right center; }Converting a stylesheet
- Search for
leftandright:grep -n -E "left|right" stylesheets/*.css. - Convert each into its logical form from the table; leave alignment chosen by editors (
.text-leftclasses from rich text) alone. - Add mirror rules for what has no logical form.
- Compare screenshots of left-to-right pages before and after: they must be identical.
- Check a right-to-left page.
Related pages
- Right-to-left designs
- Responsive design
- Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.
Become an Exponential Partner
Partners share their information, provide funding, contribute back and develop the products with us, and that is how Exponential grows. A partner website and dashboard are planned for mid-2027: please become a partner today to speed up our growth rate and land new features faster.