Как writing-mode и direction влияют на вёрстку?

Question

Accepted Answer

## Два разных рычага

- **`direction`** (`ltr` / `rtl`) — направление строки: арабский/иврит vs европейские языки. Влияет на inline-ось, `text-align: start/end`, зеркалирование части UI.
- **`writing-mode`** — ориентация текста: `horizontal-tb`, `vertical-rl`, `vertical-lr` (вертикальный набор, CJK, боковые подписи).

## Что ломается

Физические свойства (`margin-left`, `left`, `border-right`) не «поворачиваются» с режимом письма. Поэтому для интернационализации лучше **logical properties**: `margin-inline-start`, `inset-inline-end`, `padding-block`.

```css
.sidebar {
  writing-mode: horizontal-tb;
  margin-inline-start: 1rem; /* а не margin-left */
}
html[dir="rtl"] .icon-arrow { transform: scaleX(-1); }
```

Flex/Grid оси тоже привязаны к writing mode: `row` идёт по inline-оси текущего режима.

## Итог

`direction` — RTL/LTR строки; `writing-mode` — горизонталь/вертикаль. Для устойчивой вёрстки опирайтесь на logical properties, а не на left/right.