Drawer / Side Panel

This is the flip everyone forgets: what mirrors is not the contents of the drawer but the edge it hangs from. A navigation drawer that comes out of the left of the screen in English has to come out of the right in Arabic, because it is bound to where reading starts, not to physical left. Write it as inset-inline-start: 0 with inset-block: 0 and an explicit inline-size, delete left and width entirely, and turn the divider between panel and content into border-inline-end instead of border-right. The one legitimate exception is a drawer tied to a fixed meaning rather than to reading, such as a detail panel that always opens at the end of a table, and even that is written inset-inline-end, never right.

translateX has no logical counterpart: the translate function works on the physical X axis whatever the page direction, and there is no translate-inline in the spec. So a hard-coded translateX(-100%) makes the Arabic drawer start off-screen on the side opposite its own edge and fly across the whole viewport before it lands. Define --dir: 1 on the root and --dir: -1 under [dir="rtl"], then write transform: translateX(calc(-100% * var(--dir))). The alternative is animating inset-inline-start from -320px to 0, which mirrors for free but forces layout every frame, whereas transform runs on the compositor.

Pointer and touch coordinates are always physical: clientX grows toward the right of the screen in Arabic exactly as in English, and the browser never flips it for you under RTL. So a condition like if (deltaX < -60) close() is an outright bug, not a matter of taste: in Arabic a start-anchored drawer sits on the right, so the swipe that puts it away travels right and yields a positive deltaX that never satisfies the test and the panel just snaps back, while the one gesture that does satisfy it, a drag leftward, away from the anchor edge and into the page , closes the drawer by hauling it across the content, the exact opposite of what the hand is doing. Read the direction at event time with const sign = getComputedStyle(panel).direction === "rtl" ? -1 : 1, and multiply the delta by it before any comparison. The same fix is owed to a velocityX threshold and to ArrowLeft / ArrowRight if you bind them.

The two move together to the opposite side. The × sits at the logical end of the panel header: make it the last child of a flex row with justify-content: space-between and it settles by itself, or pin it with inset-inline-end instead of right. The shadow is the quieter trap: box-shadow has no logical form in CSS at all, and a value like 8px 0 24px throws the shadow off the outer edge of the viewport after the flip, where the browser clips it, leaving the panel with no lift over the content it is meant to sit above. Write the horizontal offset as calc(8px * var(--dir)), or zero it and let the blur carry it alone, since blur is symmetric by nature. The × glyph is symmetric about its vertical axis so it is never flipped, while a collapse chevron is a directional icon and does mirror with it.

Page direction governs the inline axis only. A drawer anchored to a block edge, the bottom for instance, never moves between the two languages: inset-block-end: 0 is the same bottom in both, and its deltaY drag axis keeps the same sign, so it needs no direction variable at all. The scrim is neutral too: inset: 0 covers everything and contains nothing that could flip. Scroll lock behind the drawer is neutral as well, since overflow: hidden and overscroll-behavior: contain have nothing to do with direction, and exactly one thing inside it does flip: the vanished scrollbar sits at the logical inline-end edge, which is the left of a dir="rtl" page, so compensate with scrollbar-gutter: stable rather than a hard-coded padding-right.