RTL layout mirroring
The design work behind an RTL flip: back arrows point the other way, padding swaps sides, progress fills from the right. Clocks stay put.
See it
What it is
Setting dir='rtl' sets the base text direction: inline flow reverses, text aligns to the other edge, and some flex and grid behaviour follows along. Plenty does not move on its own, including block order, absolute positioning, named grid placement, and transforms. Mirroring is the judgement layer on top: deciding which individual elements should also reverse. Back and forward arrows swap. Progress bars, sliders, steppers, and carousels fill and advance from the right. Drawers and toasts slide in from the other side. Breadcrumb chevrons turn around. Chat bubbles change shoulders.
The working rule (Material's bidirectionality guidance is the usual reference) is: mirror anything that expresses direction, sequence, or reading order, and leave everything else alone. Clock faces, checkmarks, media playback controls, logos, magnifying glasses, hamburger menus, and icons depicting real objects stay exactly as drawn. Numbers never mirror.
Gotcha: do not mirror by slapping transform: scaleX(-1) on every icon. It reverses any text baked into the glyph, flips the light source on shadows, and makes asymmetric shapes look broken. Flip per icon with a [dir='rtl'] rule, keep a list of which ones you flipped, and check it with a real RTL locale rather than by toggling the stylesheet on English copy.
Ask AI for it
Mirror this interface for RTL locales. Under dir='rtl': reverse directional icons (back and forward arrows, chevrons, breadcrumb separators, undo/redo, send, indent), make progress bars, sliders, steppers, and carousels advance from the right, slide drawers and toasts in from the mirrored side, and swap chat bubble alignment. Do not mirror clocks, checkmarks, media playback controls, logos, or icons that depict real objects. Implement each icon flip as its own [dir='rtl'] rule rather than a global scaleX(-1), and list every icon you flipped with a one-line reason.