Convert physical CSS properties like margin-left and text-align:left into their logical equivalents, or reverse the conversion, so your styles adapt to any writing direction.
Stop maintaining separate left/right overrides for RTL languages and vertical writing modes.
Every recognized physical property maps to its exact logical equivalent, not a guess.
Convert physical to logical, or logical back to physical assuming left-to-right.
Grab the converted CSS instantly with a status confirmation.
Physical CSS properties like margin-left, padding-right or text-align: left describe a fixed direction on screen, which works fine for left-to-right languages but breaks down the moment a page needs to support Arabic, Hebrew, or a vertical writing mode used in some East Asian typography. Logical properties solve this by describing direction relative to the flow of content instead: inline-start means "the start of a line of text," and block-start means "the start of the block direction," so the same declaration automatically points left in an LTR page and right in an RTL page, with no extra stylesheet or JavaScript required. Adopting logical properties is largely a mechanical rename, which is exactly what this converter automates in both directions, and the reference table below lists every mapping the tool understands so you can check any property by hand too.
| Physical | Logical |
|---|---|
margin-left | margin-inline-start |
margin-right | margin-inline-end |
margin-top | margin-block-start |
margin-bottom | margin-block-end |
padding-left | padding-inline-start |
padding-right | padding-inline-end |
padding-top | padding-block-start |
padding-bottom | padding-block-end |
border-left / -width / -style / -color | border-inline-start (+ suffix) |
border-right / -width / -style / -color | border-inline-end (+ suffix) |
border-top / -width / -style / -color | border-block-start (+ suffix) |
border-bottom / -width / -style / -color | border-block-end (+ suffix) |
left | inset-inline-start |
right | inset-inline-end |
top | inset-block-start |
bottom | inset-block-end |
text-align: left | text-align: start |
text-align: right | text-align: end |
float: left | float: inline-start |
float: right | float: inline-end |
clear: left | clear: inline-start |
clear: right | clear: inline-end |
Logical properties describe direction relative to the document's writing mode and text direction, using terms like inline-start and block-end instead of left, right, top and bottom.
Logical properties automatically adapt when a page switches to a right-to-left language or a vertical writing mode, so you don't need separate stylesheets or overrides for each direction.
Yes. When converting logical back to physical, this tool assumes a standard horizontal left-to-right writing mode, which is the most common default.
It covers margin, padding and border left/right/top/bottom variants, the inset properties, text-align values of left and right, and float and clear values of left and right.
Keep building with these free online CSS generators.