advanced

Основы RTL

Поддерживайте right-to-left layout через logical CSS properties, зеркалирование иконок где уместно, bidi-safe текст и direction-aware тестирование.

RTL-локали (арабский, иврит) требуют `dir="rtl"` на `html` или контейнерах, **logical CSS properties** (`margin-inline-start` вместо `margin-left`) и аккуратной работы с иконками, числами и встроенным LTR-текстом (URL, email).

					.card {
  margin-inline-start: 1rem;
  padding-inline: 1rem;
  border-inline-start: 3px solid var(--accent);
}

| Элемент | Заметка RTL | |---------|-------------| | Направленные иконки | Зеркалить стрелки; не зеркалить универсальные символы | | Числа | Часто остаются LTR внутри RTL-абзаца | | Смешанный текст | `unicode-bidi` и isolates для вставок | | Тесты layout | Переворачивать snapshots; не только глазами на EN |

Задавайте `lang` по локали для screen readers и переносов. Тестируйте с носителями на truncation и alignment, которые logical properties не ловят.

На интервью: logical properties vs файлы `.rtl`; Tailwind RTL plugins; bidi в формах; PDF/print в RTL.

Типовые ошибки: physical `left/right` везде; зеркалирование play; жёсткий text-align; склейка RTL и LTR без isolates.

Компромисс — один stylesheet с logical properties против дублирующих RTL theme files.

Чеклист:

`dir` и `lang` на root или locale wrapper.
Logical properties в новом CSS.
Аудит направленных иконок и анимаций.
Тест форм, таблиц и modal в ar/he.