Основные понятия логических свойств и значений

CSS 2.1 и более ранние версии определяли размеры элементов относительно физических размеров экрана. Поэтому мы описывали блоки как имеющие width и height, позиционировали элементы от top и left, назначали границы, отступы и поля к top, right, bottom, left, и т. д. Модуль логических свойств и значений определяет соответствия для этих физических свойств и значений их логическим, или ориентированным на направление текста, аналогам — например, start и end по сравнению с left и right/top и bottom.

Эти соответствия очень полезны для сайтов, которые переводятся на языки с другим направлением письма, отличным от исходной разметки. Например, в CSS-сетке, если у контейнера сетки задана ширина с помощью свойств align-self и justify-self для выравнивания элементов сетки, поскольку эти свойства логические, то justify-self: start выравнивает элемент к началу по строчному измерению, а align-self: start делает то же самое по блочному измерению.

Если направление письма этого компонента изменено на vertical-rl с помощью свойства writing-mode, выравнивание продолжает работать аналогичным образом. Строчное измерение будет работать вертикально, а блочное — горизонтально. Однако сетка выглядит иначе, поскольку ширина, заданная для контейнера, является горизонтальной мерой, связанной с физическим, а не с логическим или текстовым, направлением.

Если вместо свойства width, используется логическое свойство inline-size, компонент будет работать одинаково независимо от того, в каком направлении он отображается.

Вы можете попробовать это на живом примере ниже. Измените writing-mode с vertical-rl на horizontal-tb в .grid, чтобы увидеть, как различные свойства изменяют макет.

<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

.grid {
  writing-mode: vertical-rl;
  inline-size: 400px;
}

При работе со сайтом в направлении письма, отличном от горизонтального слева направо, или при использовании направлений письма для творческих целей, умение ориентироваться на поток контента имеет большое значение.

Ключевое понятие при работе с логически-ориентированными свойствами и значениями — два измерения: блочное и строчное. Методы CSS-макета, такие как Flexbox и Grid Layout, используют понятия block и inline вместо right и left/top и bottom при выравнивании элементов.

Строчное измерение — это измерение вдоль направления, в котором отображается строка текста в используемом режиме. Поэтому в английском документе с горизонтальным левосторонним текстом или в арабском документе с горизонтальным правосторонним текстом строчное измерение — горизонтальное. При переключении на вертикальное направление письма (например, японский документ) строчное измерение становится вертикальным, так как строки в этом режиме отображаются вертикально.

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

На диаграмме ниже показаны строчное и блочное направления в горизонтальном режиме письма:

На этой диаграмме показаны блочное и строчное направления в вертикальном режиме письма:

• Выравнивание блоков в сетке
• Выравнивание блоков в Flexbox
• Поточный макет и режимы письма
• Понимание логических свойств и значений на Smashing Magazine (2018)