Waypoint is adding an Arabic edition of the schedule for its Cairo satellite event. The HTML change is one attribute, <html lang="ar" dir="rtl">, and the first load was half right. The session list mirrored correctly, because it’s a flex row. But every card had its colored border on the left, which in Arabic is the end of the line, the time column had its spacing on the wrong side, and the “Details →” arrow pointed backwards.
The layout was written in physical directions: left, right, top, bottom. Text doesn’t flow in physical directions; it flows from a start to an end.
\nLogical properties name sides by the flow of text:
\nEvery physical property has a logical twin:
\n| Physical | \nLogical | \n
|---|---|
margin-left, margin-right | \nmargin-inline-start, margin-inline-end | \n
padding-top, padding-bottom | \npadding-block-start, padding-block-end | \n
border-left | \nborder-inline-start | \n
left, right, top | \ninset-inline-start, inset-inline-end, inset-block-start | \n
width, height | \ninline-size, block-size | \n
text-align: left | \ntext-align: start | \n
There are shorthands too: margin-inline: 1rem 2rem sets start and end, padding-block: 1rem sets both block sides, and inset-inline: 0 replaces left: 0; right: 0.
/* Before: physical */\n.session-card {\n border-left: 6px solid var(--track-color);\n padding: 12px 8px 12px 20px;\n text-align: left;\n}\n.session-card .time { margin-right: 12px; }\n\n/* After: logical */\n.session-card {\n border-inline-start: 6px solid var(--track-color);\n padding-block: 12px;\n padding-inline: 20px 8px;\n text-align: start;\n}\n.session-card .time { margin-inline-end: 12px; }In English the result is pixel-identical. In Arabic, the border moves to the right, where lines start, and the spacing follows. You write the card once.
\nFlexbox and grid already think this way. flex-direction: row, justify-content: flex-start and grid column 1 all follow the inline direction, so a flex row mirrors in RTL without any extra CSS. That’s why Waypoint’s list worked on the first try.
inline-size and block-size are the logical names for width and height, and max-inline-size: 40ch is the logical version of the readable-width cap from the intrinsic sizing lesson. In Arabic and English they behave exactly like width and height, because both scripts write horizontally. They only differ in vertical writing modes, such as writing-mode: vertical-rl for Japanese or a rotated table header, where the inline axis runs top to bottom. Using them costs nothing today and means a component survives a writing-mode change later. A sensible team rule is: logical properties for everything that relates to text flow, physical ones only for things that are physical by nature, like a shadow that should always fall downward.
A few things are physical by nature and need an explicit RTL rule:
\ntranslateX(8px) always moves right.box-shadow: 4px 0 … always throws its shadow to the right.The :dir() pseudo-class matches the element’s computed direction, inherited from the nearest dir attribute:
.more .arrow {\n display: inline-block;\n margin-inline-start: 4px;\n}\n.more .arrow:dir(rtl) {\n scale: -1 1; /* mirror horizontally */\n}:dir(rtl) is better than [dir="rtl"] .arrow because it doesn’t care where the attribute lives or whether a nested element switches back to LTR. It has been Baseline since December 2023 and widely available since mid-2026.
Not every icon should flip. A play button, a clock, or a checkmark means the same in both directions; a “back” arrow or a slider’s direction doesn’t. Ask a native reader when you’re unsure.
\nFirst, never apply letter-spacing to Arabic. Arabic letters join to their neighbours; spacing them apart breaks the joins and makes words hard to read. If your design system adds tracking to uppercase labels, reset it with :lang(ar) { letter-spacing: 0; }. Second, Arabic often needs a slightly larger font size and line height than Latin text at the same visual weight. Set those per language with :lang(ar) rather than per component.
The exercise card is written with physical properties. Convert it to logical ones and flip the arrow in RTL. The checks render it in both directions. Next, you’ll replace the card’s hex colors with oklch() and build track palettes with color-mix().
margin-inline-start is the left margin in English and the right margin in Arabic.","Setting dir="rtl" on the root mirrors flexbox, grid and logical properties automatically; physical properties like padding-left stay where they are.","Transforms, background positions, shadows and directional icons don’t flip, so handle them explicitly with :dir(rtl).","Never add letter-spacing to Arabic text; it breaks the joins between letters."],"further":[{"title":"Basic concepts of logical properties and values (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Logical_properties_and_values/Basic_concepts"},{"title":"Logical properties (web.dev Learn CSS)","url":"https://web.dev/learn/css/logical-properties"},{"title":"Structural markup and right-to-left text in HTML (W3C)","url":"https://www.w3.org/International/questions/qa-html-dir"}],"quiz":[{"q":"A card has padding-left: 20px; border-left: 6px solid. You set dir="rtl" on <html>. Where are the padding and border now?
left always means the physical left."},{"text":"Still on the left, which is now the end of each line.","why":"Correct. Physical properties ignore direction. Use padding-inline-start and border-inline-start to follow the text."},{"text":"Removed, because physical properties are ignored in RTL.","why":"They still apply; they just apply to the physical side you named."}],"answer":1},{"q":"In a flex row with justify-content: flex-start inside a dir="rtl" page, where do the items start?
flex-direction: row-reverse is set.","why":"row-reverse would swap them again, but with the default row the answer is already determined."},{"text":"On the right, because flex-start follows the inline direction.","why":"Correct. Flexbox and grid are direction-aware out of the box; that’s why most of a flex layout mirrors for free."}],"answer":3},{"q":"A “Details →” link has an arrow icon that should point the other way in Arabic. Which rule does it?
","options":[{"text":".arrow:dir(rtl) { scale: -1 1; }","why":"Correct. :dir(rtl) matches elements whose computed direction is RTL, and a negative horizontal scale mirrors the icon."},{"text":".arrow { margin-inline-start: 4px; }","why":"That moves the spacing to the correct side, which is good, but doesn’t change which way the arrow points."},{"text":".arrow { direction: rtl; }","why":"direction changes text and layout direction, not how a glyph or icon is drawn."}],"answer":0},{"q":"Which declaration sets a session card’s width in a way that also works for vertical writing modes?
","options":[{"text":"width: 20rem","why":"width is always horizontal; in a vertical writing mode the inline axis runs top to bottom."},{"text":"block-size: 20rem","why":"Block size is the height in horizontal writing, the dimension across lines, not along them."},{"text":"inline-size: 20rem","why":"Correct. inline-size is the size along the direction text runs, so it’s the width in English and Arabic and the height in vertical text."}],"answer":2}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"The card is written with physical properties, so it breaks when the wrapper switches to dir="rtl". Without changing the HTML:
text-align values and the arrow’s left margin with logical equivalents, so English looks exactly the same.:dir(rtl)).The checks render the card in both directions.
\n","hints":["border-left becomes border-inline-start; margin-right becomes margin-inline-end.","text-align: left becomes start and right becomes end. padding-inline takes a start and an end value.","For the icon: .arrow:dir(rtl) { scale: -1 1; } (or transform: scaleX(-1))."],"explanation":"Logical properties resolve against the element’s direction, so border-inline-start is the left border in English and the right border in Arabic, and the same goes for padding-inline, margin-inline-end and text-align: start/end. The English rendering is unchanged, and switching dir mirrors the card with no extra rules. Directional icons are the exception: a glyph doesn’t know which way it should point, so :dir(rtl) matches the arrow when its inherited direction is right to left and scale: -1 1 mirrors it.