Логические свойства CSS

Сначала интернет состоял в основном из текстовых документов и очень простых страниц с ссылками. О поддержке разных направлений текста никто не думал. В привычном CSS всё завязано на физические координаты — верх (top), низ (bottom), лево (left), право (right). Но если текст идёт в другом направлении, весь интерфейс должен подстраиваться: лево и право могут поменяться местами, а верх стать низом. Без логических свойств поддержка вёрстки под все языки становится очень сложной.

В мире много языков и далеко не все они основаны на привычной нам системе: направление письма слева направо, сверху вниз. В арабском языке, иврите и фарси текст пишется справа налево. В японском — сверху вниз, а столбцы идут справа налево. В традиционной монгольской письменности направление письма вертикальное сверху вниз, слева направо. Чтобы сайт адаптировался к разным вариантам направлений письменности, можно написать множество разных стилей в привычных физических выражениях для всех нужных кейсов. Или использовать логические свойства CSS.

Логические свойства CSS воплощают новый подход к стилям — более гибкий, отзывчивый, который адаптируется под сложные макеты и разные устройства. Этот же подход уже реализован в флексах, гридах и выражениях от контейнера.

На скриншоте видно, что разметка сайта может быть разной — другое расположение элементов на странице, другие эстетические предпочтения в дизайне. Логические свойства помогают сделать хорошие интерфейсы без дополнительных усилий.

В логических свойствах есть два главных направления: блочное и строчное. В русском языке блок идёт сверху вниз (вертикально), а строка — слева направо (горизонтально).

• block — направление по вертикали (обычно сверху вниз);
• inline — направление по строке (обычно слева направо);
• start / end — начало и конец соответствующего направления.

╔════════════════════════════╗
║ block-start                ║ ← верх блока
║                            ║
║   inline →   контент       ║ → направление строки
║                            ║
║ block-end                  ║ ← низ блока
╚════════════════════════════╝

В языках с письмом слева направо и справа налево направление блока — это вертикальное направление, идущее сверху вниз. block-start и block-end представляют собой начало и конец содержимого вдоль оси блока. Для простоты можно представить дерево, где вершина будет началом, а корни — концом дерева.

Это направление, в котором блоки контента — вроде абзацев <p>, заголовков и <div> — располагаются на странице.

Направление, в котором контент располагается внутри блока. Например, текст. Если сравнить направление текста с улицей или дорогой, то в языках с написанием слева направо её начало будет слева, а конец справа. Соответственно, для западных пользователей margin-left превратится в margin-inline-start.

Вместо ширины (width) и высоты (height) следует смотреть на размер блока или строки, поэтому вместо width пишем inline-size, вместо height — block-size.

Для понимания логических свойств нужно отбросить привычные термины top, bottom, left, right и заменить их на inline-start / inline-end и block-start / block-end.

Например, в русском языке чтение свойств начинается слева и идёт направо. Это строчный аспект свойств. Это можно легко запомнить, рассмотрев ряд элементов с display: inline или вспомнив написание свойств justify-content: start.

Соответственно, привычное написание отступов будет выглядеть в разных языках так:

Русский: padding-inline-start = padding-left
Арабский: padding-inline-start = padding-right
Японский: padding-inline-start = padding-top

Названия логических свойств можно комбинировать в шорткаты, как в привычных padding, margin, border.

В физическом CSS код выглядит так:

        
          
          .block {  margin-left: auto;  margin-right: auto;  padding: 10px 0;}
          .block {
  margin-left: auto;
  margin-right: auto;
  padding: 10px 0;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В новой технике код превратится в такой:

        
          
          .block {  margin-inline-start: auto;  margin-inline-end: auto;  padding-block-start: 10px;  padding-block-end: 10px;}
          .block {
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-block-start: 10px;
  padding-block-end: 10px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В виде шортката код выглядит так:

        
          
          .popup {  margin-inline: auto;  padding-block: 10px;}
          .popup {
  margin-inline: auto;
  padding-block: 10px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .card {  padding-inline-start: 2.5rem;  margin-inline-end: 1rem;  border-inline-start: 6px solid blue;}
          .card {
  padding-inline-start: 2.5rem;
  margin-inline-end: 1rem;
  border-inline-start: 6px solid blue;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Направление текста можно задать как через HTML, так и с помощью CSS. В HTML используется атрибут dir для элемента <html>. В CSS направление письма можно задать через свойство direction. Для вертикального текста также есть свойство writing-mode.

        
          
          <p dir="ltr">at dawn a homeless cat, too cries for love</p>
          <p dir="ltr">at dawn a homeless cat, too cries for love</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .ltr {  direction: ltr;}.rtl {  direction: rtl;}
          .ltr {
  direction: ltr;
}

.rtl {
  direction: rtl;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Переключая языки интерфейса на сайте правительства Объединённых Арабских Эмиратов, можно увидеть, как меняется расположение текста и картинок, в зависимости от выбранного языка.

Когда мы переключаем языки в демке, меняется направление письма и с ним меняется интерфейс.

Изначально адаптацию интерфейса под нужды мультиязычного сайта делали с помощью атрибута dir, размещая элементы интерфейса с помощью свойств float. Либо создавали отдельный файл для стилей, который подключался для RTL сайтов. RTL стили могли писать вручную, а также использовали большое количество разных конвертеров, плагинов и библиотек. Потом на смену такому способу пришли переменные препроцессора SASS, которые больше подходили для поддержки сайтов с языками, пишущимися в разные стороны (RTL и LTR). Сейчас возможности нативного CSS достаточно развиты и уже можно справиться с задачей без помощи препроцессоров.

Теоретически можно создать сайт, который определяет через регулярные выражения, какой основной стиль письма для носителей и переключает интерфейс в нужный режим. Например, это может сработать для носителей иврита, арабского языка, урду. Но что будет, если люди будут пользоваться арабским и английским одновременно? Сайт попросту сломается.

Для того, чтобы понять философию нового подхода, нужно немного поменять мышление и перестать опираться на привычный подход с ориентирами в виде физики, и перейти на строчно-блочную модель расположения элементов. Если вообразить, что есть две основные оси — x для горизонтали, а y для вертикали в случае с русским или английским языками, то значения для x будут со словом inline, y - block. Это основное правило для понимания.

У логических свойств CSS огромные преимущества.

Повышенная гибкость в отзывчивом дизайне: в отзывчивом дизайне позволяют сделать раскладку более гибкой и адаптивной к различным размерам экранов и устройств. Разработчики могут создавать дизайны, которые автоматически подстраиваются под доступное пространство и размеры экрана. Это упрощает процесс разработки, можно обойтись без лишних медиазапросов и сложных вычислений.

Лёгкая адаптация к различным режимам письма: отлично справляются с различными режимами написания текста, например, слева-на-право (LTR) и справа-на-лево (RTL). Эти свойства легко адаптируются к режиму написания документа, при этом интерфейс не ломается и сохраняет логику. Можно создавать более сложные и гибкие интерфейсы, которые будут удобны многим пользователям.

Экономия ресурсов на разработку: позволяют создавать стили сразу для всех возможных направлений интерфейсов, не нужно писать дополнительные стили для разных вариантов направлений письма. Не нужно поддерживать и обновлять отдельные стили других версий сайта.

Пример сайта, адаптированного к разным направлениям интерфейса — 2ГИС. Можно посмотреть дубайскую версию по ссылке.

Если вы только начинаете работать с логическими свойствами, не обязательно сразу переписывать весь CSS. Начните использовать их в новых компонентах или постепенно внедряйте при рефакторинге. Такой подход позволит перейти на новую систему без стресса и с максимальной пользой для проекта.

Требуют изучения, непривычная методология написания.
Для поддержки старых браузеров всё ещё нужны физические свойства.

В Tailwind тоже появилась поддержка логических свойств CSS. Теперь можно создавать более современные интерфейсы с гибкой раскладкой с помощью этого CSS-фреймворка.

Более подробно о написании интерфейсов с поддержкой RTL при помощи Tailwind можно почитать в статье "Tips on RTL Design (TailwindCSS)".

Для преобразования обычного CSS в логические свойства (CSS Logical Properties) можно использовать следующие инструменты и подходы:

Логические свойства заменяют физические (например, left, right, top, bottom) на свойства, основанные на направлении текста и writing-mode. Вот основные замены:

• margin-left
  • Логическое свойство: margin-inline-start
  • Шорткат: margin-inline
  • Комментарий: Начало строки в текущем направлении письма
• margin-right
  • Логическое свойство: margin-inline-end
  • Шорткат: margin-inline
  • Комментарий: Конец строки
• margin-top
  • Логическое свойство: margin-block-start
  • Шорткат: margin-block
  • Комментарий: Начало блока (обычно сверху)
• margin-bottom
  • Логическое свойство: margin-block-end
  • Шорткат: margin-block
  • Комментарий: Конец блока (обычно снизу)

• padding-left
  • Логическое свойство: padding-inline-start
  • Шорткат: padding-inline
  • Комментарий: Начало строки
• padding-right
  • Логическое свойство: padding-inline-end
  • Шорткат: padding-inline
  • Комментарий: Конец строки
• padding-top
  • Логическое свойство: padding-block-start
  • Шорткат: padding-block
  • Комментарий: Начало блока
• padding-bottom
  • Логическое свойство: padding-block-end
  • Шорткат: padding-block
  • Комментарий: Конец блока

• border-left
  • Логическое свойство: border-inline-start
  • Шорткат: border-inline
  • Комментарий: Начало строки
• border-right
  • Логическое свойство: border-inline-end
  • Шорткат: border-inline
  • Комментарий: Конец строки
• border-top
  • Логическое свойство: border-block-start
  • Шорткат: border-block
  • Комментарий: Начало блока
• border-bottom
  • Логическое свойство: border-block-end
  • Шорткат: border-block
  • Комментарий: Конец блока

• border-top-left-radius
  • Логическое свойство: border-start-start-radius
  • Комментарий: Верхний левый угол (в LTR)
• border-top-right-radius
  • Логическое свойство: border-start-end-radius
  • Комментарий: Верхний правый угол (в LTR)
• border-bottom-left-radius
  • Логическое свойство: border-end-start-radius
  • Комментарий: Нижний левый угол (в LTR)
• border-bottom-right-radius
  • Логическое свойство: border-end-end-radius
  • Комментарий: Нижний правый угол (в LTR)

• width
  • Логическое свойство: inline-size
  • Комментарий: Размер по строке
• height
  • Логическое свойство: block-size
  • Комментарий: Размер по блоку
• min-width
  • Логическое свойство: min-inline-size
  • Комментарий: Минимальный размер по строке
• min-height
  • Логическое свойство: min-block-size
  • Комментарий: Минимальный размер по блоку
• max-width
  • Логическое свойство: max-inline-size
  • Комментарий: Максимальный размер по строке
• max-height
  • Логическое свойство: max-block-size
  • Комментарий: Максимальный размер по блоку

• left
  • Логическое свойство: inset-inline-start
  • Шорткат: inset-inline
  • Комментарий: Положение относительно начала строки
• right
  • Логическое свойство: inset-inline-end
  • Шорткат: inset-inline
  • Комментарий: Положение относительно конца строки
• top
  • Логическое свойство: inset-block-start
  • Шорткат: inset-block
  • Комментарий: Положение относительно начала блока
• bottom
  • Логическое свойство: inset-block-end
  • Шорткат: inset-block
  • Комментарий: Положение относительно конца блока

• VS Code: Используйте расширения, например, 'Logical Properties', это облегчит преобразование CSS.
• ESLint: С помощью правил ESLint можно проверять и автоматически исправлять CSS-код, включая логические свойства.

Нейросети могут быть обучены на большом объёме данных, чтобы распознавать паттерны использования физических свойств CSS и преобразовывать их в соответствующие логические свойства. Но сейчас они всё ещё находятся на этапе развития и требуют за собой перепроверки.

Следить за развитием логических свойств можно в спецификации.