CSS tips for LTR & RTL support
Use logical margins instead of left/right
margin-inline-start: 16px;
margin-inline-end: 16px;
Prefer logical properties.
Use text-align: start and end text-align: end;
→ left in LTR, right in RTL.
Use logical positioning instead of left/right
Avoid left and right in position:absolute
inset-inline-start: 10px;
Set direction at the root
html { direction: ltr;}
html[dir="rtl"] {direction: rtl;}
Use :dir() selector when needed
:dir(rtl) .icon { transform: scaleX(-1);}
Padding should also be logical
padding-inline-start: 12px; padding-inline-end: 12px;
Fallback for older browsers (optional)
margin-left: 16px;
margin-inline-start: 16px;
Logical property overrides where supported.
Top comments (0)