Logical properties / RTL
React chapter 122 · MUI RTL · Chakra dir · Radix DirectionProvider · source: mui/material-ui RTL · chakra-ui direction · W3C logical properties
The problem
padding-left and border-left pin chrome to the physical left. Flip dir="rtl" for Arabic or Hebrew and the accent stays on the left — the start edge in RTL is the right. Mirroring with [dir=rtl] .x { padding-right } doubles every rule.
The pattern that fixes it
Logical properties: padding-inline-start, border-inline-start, margin-inline-end, inset-inline. They follow writing direction. MUI theme.direction, Chakra dir, Radix DirectionProvider set dir on a root; CSS does the rest. Pair with dir="auto" on user text.
Keep learning
- Previous: styled() + $ transient props
- Next: Ready queue
- Related: clsx / classnames
- Related: cn / tailwind-merge
- Related: CVA variants
- Related: CSS variable tokens
- Related: data-state styling
- Related: :where() zero specificity
More courses
- Jobs, linked to lessons — Browse jobs where every requirement links to the chapter that teaches it. See how ready you are, how long the gap takes to close, and which listings look stale.
- Match a job post to courses — Paste a job post. Each skill is matched to a track here and put in learning order, foundations first.
- Database in depth — How a query becomes work. Indexes, isolation, locks, and the plans that explain why a page is slow — not an ORM tour.
- System Design — Eight interview case studies, from a flash sale and Tatkal to a live final and a chat model, plus JWT in separate chapters.
- Microservices — Microservice patterns one diagram at a time: how to split a monolith, how services talk, and how data stays consistent without distributed transactions.
- Kafka — A beginner-to-senior path through event logs, reliable delivery, production operations, and disaster recovery.
- Frontend system design — How a UI is sliced when it is a product, not a page: ownership of state, cache, routes, and what happens when the network lies.
- CSS in depth — See the box, then the page. Visual chapters from the box model through Flexbox surprises, Grid, selectors, and units, then backgrounds, shapes, and visual effects, each with a playground.
- Accessibility — HTML labs first, then a full pass of WAI-ARIA 1.3: naming, every state, widget and structure roles, live regions, ariaNotify, and relationships.
- Docker — What an image is, why layers cache, and how containers find each other on a network.
- Redis — Fifteen Redis patterns, one picture each: cache, session, lock, counter, rate limiter, queue, and when Redis is the wrong tool.