Using CSS Logical Properties for Direction‑Aware Layouts

Consider a summary card with an image followed by some text. A flex row puts the image at the beginning of the row, and margin-right separates it from the copy. It looks correct in a left‑to‑right document.

Set dir="rtl" on the document and the row follows the opposite direction. The image moves to the right‑hand side, but its physical right margin is now outside the component. The relationship we meant was never "space on the right". It was "space after the image".

Adding an RTL override can patch that example, but every new physical declaration creates another patch to remember.

Block and Inline Axes

Physical properties describe the viewport: top, right, bottom, left, width, and height. Logical properties describe the flow of the content.

The inline axis is the direction in which text runs within a line. The block axis is the direction in which lines and blocks are laid out. Each axis has a start and an end. Their physical mapping comes from the element's writing mode and direction.

Inline start is therefore not another spelling of left. In a horizontal RTL context it is right; in the vertical example it is top. The CSS Writing Modes Level 3 Recommendation defines these axes and their mapping through writing-mode, direction, and text orientation.

direction changes the inline start and end for horizontal writing, but it does not turn the block axis sideways. writing-mode can change which physical dimension carries each axis. That distinction matters in nested components: a vertical label inside a horizontal page calculates its logical sides from its own computed writing mode, not from a diagram drawn for the page around it. Inspect the element you are styling rather than assuming the document's axes apply unchanged everywhere.

Use the HTML dir attribute to express the direction of content. CSS should respond to that direction, not guess it from the language or use layout rules to alter the meaning of the text.

Replace Relationships, Not Words

A mechanical search for left and replacement with inline-start is unsafe. First ask what the declaration means.

A photograph of an arrow pointing east may genuinely belong on the physical right. A back arrow may need a different asset or transformation after its cultural meaning has been reviewed. Logical properties express layout relationships; they do not decide what an image means.

Size needs the same intent check as sides. max-inline-size behaves like max-width in ordinary horizontal writing, but in vertical-rl it limits the physical height because that is the inline dimension. That is correct when the rule means "do not let a line of content grow beyond this measure". It is wrong when the design requirement is specifically a fixed‑width photograph or a panel tied to the viewport's horizontal dimension. Logical does not mean preferable in every declaration; it means relative to content flow.

The CSS Working Group's Logical Properties and Values draft describes these declarations as writing‑mode‑relative equivalents of physical box‑model properties. By August 2022, the longhands used here were practical in evergreen browsers, but their first unprefixed versions differed:

That table is deliberately property‑specific. Support for one longhand does not establish support for every shorthand, logical corner, or value in the module.

Positioning from Start and End

The same idea applies to a positioned badge:

.summary {  position: relative;}.summary__badge {  position: absolute;  inset-block-start: 0.5rem;  inset-inline-end: 0.5rem;}

In horizontal LTR the badge sits at the top right. In horizontal RTL it sits at the top left. In vertical-rl with LTR direction, block start is right and inline end is bottom, so the badge maps to the bottom right. The DOM does not change between those presentations.

A Direction‑Aware Component

Here is the physical version of the summary card:

.summary {  display: flex;  max-width: 36rem;}.summary__image {  flex: 0 0 8rem;  margin-right: 1rem;}[dir='rtl'] .summary__image {  margin-right: 0;  margin-left: 1rem;}

The patch works for those two directions, but it encodes the mapping twice and says nothing useful about vertical writing. Replace the relationship itself:

.summary {  display: flex;  max-inline-size: 36rem;}.summary__image {  flex: 0 0 8rem;  margin-inline-end: 1rem;}.summary__body {  padding-inline-start: 1rem;  border-inline-start: 0.25rem solid #4b4b4b;}

The image remains first in the document. Flexbox lays a row along the inline axis, and the end margin stays after the image. The body border and padding remain at inline start. Do not use CSS order, row reversal, or duplicated markup to force a visual repair; that risks creating a different reading or focus sequence from the one on screen.

This component is direction‑aware, not translated. Its strings, dates, numbers, font choices, line breaking, and assets still need their own internationalisation work.

Fallbacks and Mixed Declarations

If the browser requirement includes releases without logical longhands, a physical declaration can be a fallback. Ordering it before a logical declaration is necessary but not always sufficient:

.summary__image {  margin-right: 1rem;  margin-inline-end: 1rem;}

In LTR, the later logical property maps to the same side and wins in a supporting browser. In RTL, however, margin-right and margin-inline-end map to different sides, so both margins can remain. Reversing the order is worse because the physical declaration can override the logical mapping where they share a side.

When legacy RTL is a real requirement, contain the old mapping and clear it inside a support query:

.summary__image {  margin-right: 1rem;}[dir='rtl'] .summary__image {  margin-right: 0;  margin-left: 1rem;}@supports (margin-inline-end: 1rem) {  .summary__image,  [dir='rtl'] .summary__image {    margin-right: 0;    margin-left: 0;    margin-inline-end: 1rem;  }}

An unsupported property is ignored, allowing the fallback to remain. A supported property with an invalid value is a different problem: the declaration does not become a signal to apply an earlier relationship automatically. Test the actual property and value that the component uses.

Test More than Rtl Text

Build fixtures for horizontal LTR, horizontal RTL, and the vertical mode claimed by the component. Inspect computed margin, padding, border, inset, and size values in the browser versions the product supports. A screenshot alone can miss a fallback which leaves equal unwanted space on both sides.

Use realistic content lengths and mixed‑direction strings. Zoom the page, enlarge text, tab through every control, and confirm that focus follows meaningful document order. Check focus visibility and high‑contrast presentation where it affects borders or badges.

Review assets separately. A decorative photograph normally stays unchanged. A directional control may need a considered counterpart. A brand mark or media playback symbol should not be flipped merely because the document direction changed.

Wrapping Up

Logical properties let CSS state the relationship the component means: before or after content, along a line or across blocks, at the start or end of an axis. That removes many physical LTR assumptions without duplicating the document.

Choose the relationship first, verify every property against the August 2022 support requirement, and test the component in each writing configuration it claims to handle. Direction‑aware CSS is a useful layer of internationalisation, but it is only one layer.