RTL CSS checker
Paste a stylesheet and get every physical left/right property flagged, with the logical-property fix applied automatically wherever the swap is mechanical.
.notification {
margin-inline-start: 12px;
padding-inline-end: 16px;
text-align: start;
border-inline-start: 3px solid var(--accent);
border-start-start-radius: 8px;
float: inline-end;
}| Line | Found | Kind | Note |
|---|---|---|---|
| 2 | margin-left: 12px; | Fixed automatically | margin-left depends on document direction; use margin-inline-start. |
| 3 | padding-right: 16px; | Fixed automatically | padding-right depends on document direction; use padding-inline-end. |
| 4 | text-align: left; | Fixed automatically | text-align: left depends on document direction; use start. |
| 5 | border-left: 3px solid var(--accent); | Fixed automatically | border-left depends on document direction; use border-inline-start. |
| 6 | border-top-left-radius: 8px; | Fixed automatically | border-top-left-radius names a physical corner; use border-start-start-radius. |
| 7 | float: right; | Fixed automatically | float: right depends on document direction; use float: inline-end (check your target browsers). |
The six RTL mistakes
Almost every RTL bug traces back to one of six habits: hardcoding margin-left or padding-right instead of the inline-start/end logical property; positioning with left/right instead of inset-inline-start/end; setting text-align to left or right instead of start or end; naming a border side or a border-radius corner physically instead of logically; floating an element left or right instead of to an inline edge; and reaching for transform: translateX or a background-position side, neither of which has a clean logical equivalent, without a direction check.
The fix for the first five is almost always a rename, since logical properties render identically to their physical counterpart in a left-to-right layout and only differ once direction flips. The last category (transforms, background positions, and hardcoded direction) needs a human to decide what should actually happen in RTL.