# Logical Properties for Direction
**MUST** · **ID:** `layout-logical-properties` · **Category:** layout
**Source:** [jakubkrehel](https://github.com/jakubkrehel/skills)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/layout-logical-properties
> MUST: Use direction-agnostic properties so the layout mirrors in RTL: `margin-inline-start`/`-end` not `margin-left`/`-right`, `padding-inline-end` not `padding-right`, `inset-inline-start`/`-end` not `left`/`right`, `text-align: start`/`end` not `left`/`right` (Tailwind: `ms-*`, `me-*`, `ps-*`, `pe-*`, `start-*`, `end-*`, `text-start`, `text-end`). Set `lang` — it picks quotes, hyphenation, font fallback and the screen-reader voice — and `dir="rtl"` where needed. Under `dir="rtl"` the browser mirrors flex/grid order while every hardcoded left and right stays put, so icons detach and padding collides.
Use direction-agnostic CSS — margin-inline-start, not margin-left — so a layout mirrors correctly in right-to-left languages
Physical properties encode a hardcoded assumption that text flows left-to-right. `margin-left` means "the left edge of the screen"; `margin-inline-start` means "the edge the reading starts at", which is the left in English and the right in Arabic, Hebrew, Persian and Urdu. Set `dir="rtl"` on a subtree built from physical properties and the browser dutifully mirrors the flex/grid order while every hardcoded left and right stays put — so the icon that hugged the text now detaches from it, the padding that kept a dismiss button clear of the label is now on the wrong side and the two collide, and the copy is still ragged-left in a language that is read right-to-left. The full mapping is small: `margin-inline-start`/`-end` for `margin-left`/`-right`, `padding-inline-start`/`-end`, `inset-inline-start`/`-end` for `left`/`right`, `border-inline-start`, and `text-align: start`/`end` for `left`/`right`. Tailwind ships all of them (`ms-*`, `me-*`, `ps-*`, `pe-*`, `start-*`, `end-*`, `text-start`, `text-end`), so the direction-agnostic version costs the same number of characters as the broken one. `lang` is the other half and is not decorative: it selects the right quotation marks, hyphenation dictionary and font fallbacks, and it is what a screen reader uses to pick a voice. Note this is a distinct gap from the internationalisation rules the guide already covers — content-language-detection and content-translate-no are about the words; this is about which way the box points.
## Rule snippet
```tsx
/* .card { margin-left: 1rem; text-align: left; } ✗ */
.card { margin-inline-start: 1rem; text-align: start; } /* ✓ */
```
## Bad — do not do this
`layout-logical-properties-bad`
```tsx
import { useState } from 'react';
import { Alert02Icon, Cancel01Icon } from '@hugeicons/core-free-icons';
import { HugeiconsIcon } from '@hugeicons/react';
export function LogicalPropertiesBad() {
const [rtl, setRtl] = useState(true);
return (
Physical properties: ml / text-left / pr
{/* No `lang`, so the browser has no idea which quotes or hyphenation to use either. */}
{/* ml-3 = "3 units from the LEFT of the screen", not "from the icon". */}
{rtl ? 'فشل النشر إلى الإنتاج' : 'Deploy to production failed'}
{/* Pinned to the right, whatever the reading direction. */}
Flip to RTL. The flex order mirrors, but every hardcoded left and right stays put: the{' '}
ml-3 gap is now on the far side of the text so the icon detaches from the words it
belongs to, the pr-12 reserve is stranded on the wrong edge and the dismiss button —
pinned with right-3 — lands on top of the icon, and the copy is still ragged-left in
a language that is read right-to-left.
);
}
```
## Good — do this
`layout-logical-properties-good`
```tsx
import { useState } from 'react';
import { Alert02Icon, Cancel01Icon } from '@hugeicons/core-free-icons';
import { HugeiconsIcon } from '@hugeicons/react';
export function LogicalPropertiesGood() {
const [rtl, setRtl] = useState(true);
return (
Logical properties: ms / text-start / pe
{/* `lang` is not decorative: it picks the quotes, the hyphenation dictionary,
the font fallbacks, and the voice a screen reader reads this in. */}
{/* ms-3 = "3 units from where the reading starts", so the gap stays next to the icon. */}
{rtl ? 'فشل النشر إلى الإنتاج' : 'Deploy to production failed'}
The same row mirrors correctly with zero extra CSS and no RTL stylesheet, because nothing in it
names a physical edge: ms-3 is a gap from the start edge, pe-12 reserves
space at the end edge, end-3 pins the dismiss button to the end edge, and{' '}
text-start aligns the copy to whichever side the reader begins on. The full mapping
is small — ms/me, ps/pe, start/end,{' '}
border-s/border-e, text-start/text-end — and costs the same number of
characters as the broken version.