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

Мы привыкли к margin-left и padding-top — это физические свойства, они привязаны к сторонам экрана. Но на арабском и иврите текст идёт справа налево, а в японском бывает вертикальным. Логические свойства привязаны к направлению текста: «начало строки» само окажется справа или слева, как нужно языку.

Две оси: inline и block

У логических свойств своя система координат:

• inline — направление строки. В русском и английском — слева направо;
• block — направление, в котором идут абзацы и блоки. Обычно — сверху вниз.

У каждой оси есть начало (start) и конец (end). Поэтому вместо «отступ слева» говорят «отступ в начале строки» — margin-inline-start.

Как это выглядит

Атрибут dir="rtl" переключает направление текста справа налево. Сравните два одинаковых блока:

<style>
  .note { margin-bottom: 8px; padding: 8px; padding-inline-start: 40px; background: lavender; border-inline-start: 4px solid rebeccapurple; }
</style>
 
<div class="note">Обычное направление: полоса и отступ слева</div>
<div class="note" dir="rtl">Направление справа налево: полоса и отступ справа</div>

CSS один и тот же, а полоса и отступ сами переехали на другую сторону.

Соответствие свойств

Так же устроены padding-*, border-* и другие свойства со сторонами.

Сокращения

Удобнее всего логические сокращения для двух сторон сразу. margin-inline: auto центрирует блок, padding-block: 8px задаёт отступы сверху и снизу:

<style>
  .box { max-inline-size: 300px; margin-inline: auto; padding-block: 8px; padding-inline: 16px; background: honeydew; }
</style>
 
<div class="box">По центру, отступы 8px сверху и снизу, 16px по бокам</div>

Эти сокращения полезны даже на сайте только на русском: padding-inline короче и понятнее, чем padding: 0 16px с запоминанием порядка сторон.

Вертикальный текст

Свойство writing-mode поворачивает направление письма. Логические свойства поворачиваются вместе с ним:

<style>
  .tag { writing-mode: vertical-rl; padding-block: 12px; padding-inline: 4px; background: gold; }
</style>
 
<span class="tag">Вертикальная надпись</span>

Здесь padding-block дал отступы слева и справа — ведь ось блоков теперь горизонтальная. Так делают подписи на корешках и боковые вкладки.

Частая ошибка

Физические свойства в интерфейсе, который переводят на арабский или иврит. Иконка отделена от текста через margin-right, и в направлении справа налево отступ оказывается не с той стороны:

<style>
  .bad .icon { margin-right: 12px; }
  .good .icon { margin-inline-end: 12px; }
  p { margin: 4px 0; }
</style>
 
<p class="bad" dir="rtl"><span class="icon">★</span>margin-right: текст прилип к звезде</p>
<p class="good" dir="rtl"><span class="icon">★</span>margin-inline-end: отступ на месте</p>

Пишите новые стили логическими свойствами — они работают при любом направлении текста.