Привет, RTL! Или почему твоя верстка «взрывается» на арабском
Представь ситуацию: ты неделю вылизывал идеальный лендинг. Каждый пиксель на своем месте, анимации плавные, заказчик в восторге. И тут прилетает задача: «Мы выходим на рынок ОАЭ и Израиля, нужно добавить поддержку арабского и иврита». Ты переключаешь направление текста на rtl и понимаешь, что твой макет превратился в тыкву. Отступы не там, иконки смотрят не туда, а бургер-меню вообще улетело за границы экрана.
Раньше это означало бессонные ночи и написание второго файла стилей. Сегодня, в 2026 году, это признак плохого тона. Если ты до сих пор мыслишь категориями «лево» и «право», пора пересаживаться на логические свойства CSS. Это не просто «фича», это стандарт выживания в современном вебе.
Как мы страдали раньше
Вспомни эти костыли. Чтобы отзеркалить интерфейс, нам приходилось писать тонны переопределений. Мы создавали отдельный класс или использовали селектор атрибута [dir=»rtl»]. Это выглядело примерно так: если для английского мы писали margin-left: 20px, то для арабского приходилось обнулять его и ставить margin-right: 20px.
Код превращался в нечитаемую кашу. Ты правил отступ в одном месте и забывал поправить его для RTL-версии. А если проект большой? Поддержка превращалась в ад. Мы даже использовали препроцессоры и плагины вроде PostCSS-rtl, которые генерировали кучу дублирующего кода, раздувая размер CSS-бандла. Кстати, если ты борешься не только с направлением текста, но и с его поведением в заголовках, советую заглянуть в статью про свойство text-wrap: balance и text-wrap: pretty — это сэкономит тебе еще пару часов на рефакторинге.
Как делать правильно в 2026 году
Секрет прост: забудь про физические стороны света (left, right, top, bottom). Думай категориями потока. В CSS появились логические эквиваленты для всего: отступов, границ, размеров и даже позиционирования. Вместо того чтобы привязываться к «лево», мы привязываемся к «началу строки» (start). Если язык читается слева направо — это лево. Если справа налево — это право. Браузер сам все вычислит за тебя.
Основные игроки здесь — inline (вдоль строки) и block (перпендикулярно строке). Например, margin-inline-start заменит тебе и margin-left, и margin-right в зависимости от контекста. Это делает верстку по-настоящему гибкой. Для адаптации размеров текста под такие гибкие контейнеры отлично подходит создание адаптивной типографики с помощью функции clamp(), что в связке с логическими свойствами дает неубиваемый интерфейс.
Готовый сниппет кода
Давай сравним старый подход и новый, современный. Обрати внимание, как сокращается количество кода и логических проверок.
/* Старый подход (Physical Properties) */
.card {
margin-left: 20px;
padding-right: 10px;
border-left: 5px solid blue;
width: 300px;
}
[dir="rtl"] .card {
margin-left: 0;
margin-right: 20px;
padding-right: 0;
padding-left: 10px;
border-left: none;
border-right: 5px solid blue;
}
/* Современный подход (Logical Properties) */
.card-modern {
/* margin-inline-start заменит margin-left в LTR и margin-right в RTL */
margin-inline-start: 20px;
/* padding-inline-end заменит padding-right в LTR и padding-left в RTL */
padding-inline-end: 10px;
/* Граница всегда будет в начале строки */
border-inline-start: 5px solid blue;
/* Логический размер (ширина для горизонтальных языков) */
inline-size: 300px;
}
Частая ошибка новичков
Самый большой косяк, который я вижу на ревью у мидлов — это «винегрет» из свойств. Разработчик начинает использовать margin-inline-start, но при этом оставляет padding-left. В итоге при переключении языка часть отступов зеркалится, а часть — нет. Дизайн «разваливается», и найти причину в огромном CSS-файле становится квестом на выживание.
Правило простое: если ты перешел на логические свойства в компоненте, используй их для всего. Не смешивай физику и логику. И помни про иконки! Стрелочки «назад» и «вперед» тоже должны зеркалиться. Для этого не обязательно менять свойства, достаточно простого transform: scaleX(-1) для родителя с атрибутом dir=»rtl», но сами контейнеры для этих иконок должны быть позиционированы логически.
🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!