Logical Properties: логические свойства для многоязычного дизайна

🔍 Что такое Logical Properties и зачем они нужны?

Раньше мы использовали margin-left, padding-right, border-top — эти свойства привязаны к физическим направлениям. Но что, если ваш сайт поддерживает арабский или иврит, где текст читается справа налево (RTL)? Вот тут на сцену выходят Logical Properties — они привязываются к логическому потоку контента, а не к физическим координатам.

💡 Представьте, что ваш макет — это книга. Логические свойства работают как «начало страницы» (inline-start) и «конец страницы» (inline-end), а не «слева» или «справа».

🌍 Основные концепции: поток и оси

Inline и Block оси

Inline-axis — направление текста (горизонтальное для LTR/RTL, вертикальное для языков вроде монгольского).
Block-axis — перпендикулярно inline-оси (вертикальное для LTR/RTL).

.element {
  margin-inline-start: 20px; /* Логический "левый" отступ */
  padding-block-end: 10px;   /* Логический "нижний" отступ */
}

Размеры

Замените width и height на логические аналоги:

.container {
  inline-size: 300px;  /* Заменяет width */
  block-size: 150px;   /* Заменяет height */
}

🛠 Практические примеры

1. Кнопка с иконкой

Для LTR и RTL-языков иконка должна быть с правильной стороны:

.button {
  padding-inline-start: 16px;
  padding-inline-end: 24px;
}

2. Границы и скругления

Используйте логические свойства для border-radius:

.card {
  border-start-start-radius: 8px; /* Верхний-левый угол (LTR) */
  border-end-end-radius: 8px;     /* Нижний-правый угол (LTR) */
}

📊 Таблица замен физических свойств

Физическое свойство	Логическое свойство
`margin-left`	`margin-inline-start`
`padding-right`	`padding-inline-end`
`border-top`	`border-block-start`
`width`	`inline-size`

🔥 Продвинутые техники

1. Резиновые отступы

Комбинируйте логические свойства с calc():

.section {
  padding-inline: clamp(1rem, 5vw, 3rem);
}

2. Анимации

Логические свойства работают с transition:

.tab {
  transition: margin-inline-start 0.3s ease;
}

🚨 Осторожно: подводные камни

Браузерная поддержка: IE11 и старые Safari требуют полифилов.
Комбинации: Не смешивайте логические и физические свойства в одном компоненте.
Тестирование: Всегда проверяйте в режимах LTR и RTL через dir="rtl".

Если вы не знаете, с чего начать — попробуйте заменить только margin и padding. Как говорит Данила Бежин: «Лучше медленно идти в правильном направлении, чем быстро — в случайном».

🎯 Итоги

Logical Properties делают ваш дизайн гибким для любых языков.
Они упрощают поддержку RTL-интерфейсов.
Начинайте с малого: замените padding/margin, затем переходите к размерам.