Логические свойства и многоязычность

Ты сверстал цитату: полоска слева, отступ слева, текст по левому краю. Красиво.

Потом сайт переводят на арабский. Текст идёт справа налево, и вся страница разворачивается зеркально — браузер делает это сам, если поставить dir="rtl". Всё, кроме твоей цитаты: полоска осталась слева, отступ тоже, а текст прижался к правому краю. Блок развалился.

Причина в том, что left — это про экран, а не про текст. Логические свойства говорят не «слева», а «в начале строки» — и начало у каждого языка своё.

Вместо верх-низ-лево-право в логической модели две оси.

Inline — вдоль строки. В русском и английском это горизонталь, слева направо. В арабском — та же горизонталь, но справа налево. В японской вертикальной вёрстке — сверху вниз.

Block — поперёк строки, в направлении, куда идут блоки. Обычно это сверху вниз.

.quote {
  border-left: 3px solid;
  padding-left: 16px;
  margin-top: 24px;
  margin-bottom: 24px;
  text-align: left;
}

.quote {
  border-inline-start: 3px solid;
  padding-inline-start: 16px;
  margin-block: 24px;
  text-align: start;
}

<div dir="ltr">  <blockquote class="physical">    <p>На left и right. Поменяй dir на rtl — и посмотри, что станет.</p>  </blockquote>​  <blockquote class="logical">    <p>На логических свойствах. Едет вместе с текстом.</p>  </blockquote></div>

/* Прибито к сторонам экрана */.physical {  border-left: 3px solid #c8394a;  padding-left: 16px;  margin: 0 0 20px;  text-align: left;}​/* Привязано к направлению письма */.logical {  border-inline-start: 3px solid #0f8f6a;  padding-inline-start: 16px;  margin-block: 0 20px;  text-align: start;}​blockquote p { margin: 0; font-size: 14px; }

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

inset: 0 заменяет четыре строки с нулями — это самый частый способ растянуть элемент на весь родитель. А inset-inline-start ведёт себя как left в русском и как right в арабском.

1.card {2  position: relative;3}45/* Бейдж всегда в начале верхнего края — где бы это начало ни было */6.card__badge {7  position: absolute;8  inset-block-start: 8px;9  inset-inline-start: 8px;10}1112/* Подложка на весь родитель — одна строка вместо четырёх */13.card__overlay {14  position: absolute;15  inset: 0;16}

Скругления тоже умеют быть логическими, но имена у них непривычные: сначала ось block, потом inline.

border-start-start-radius — угол на пересечении начала блочной оси и начала строчной. В обычном русском тексте это левый верхний угол, в арабском — правый верхний.

Кусок стилей интерфейса, который живёт сразу в нескольких локалях. Ни одного left или right — и при этом ни одного отдельного файла под RTL.

1@layer components {2  .toast {3    position: fixed;4    /* Всплывает в конце строки: справа в русском, слева в арабском */5    inset-block-end: 24px;6    inset-inline-end: 24px;7    inline-size: min(360px, calc(100vw - 32px));89    display: grid;10    grid-template-columns: auto 1fr auto;11    gap: 12px;12    padding-block: 14px;13    padding-inline: 16px;1415    border-inline-start: 3px solid var(--accent);16    border-radius: 12px;17  }1819  .toast__close {20    /* Кнопка закрытия — в конце строки, а не «справа» */21    margin-inline-start: auto;22  }2324  /* Стрелка — единственное место, где нужен разворот вручную */25  .toast__arrow {26    transform: scaleX(1);27  }2829  [dir="rtl"] .toast__arrow {30    transform: scaleX(-1);31  }32}

Обрати внимание на последнее правило. Логические свойства разворачивают раскладку, но не разворачивают содержимое: иконка со стрелкой вправо так и останется смотреть вправо. Такие вещи переворачивают вручную — и их обычно единицы.

Локализация не заканчивается на отступах. Есть вещи, о которых вспоминают только когда сайт уже перевели.

• Длина текста. Немецкий и финский дают слова вдвое длиннее английских, и кнопка «Save» превращается в «Speichern unter». Фиксированная ширина кнопки — верный способ получить обрезанный текст.
• Цифры. В арабской локали могут использоваться свои начертания цифр, и ширина строки меняется.
• Переносы. hyphens: auto работает только вместе с правильным lang — без него браузер не знает словарь переносов.
• Сортировка и регистр. Это уже забота бэкенда, но верстальщику стоит знать: порядок букв в алфавитах разный.

• Тень от источника света. Свет в интерфейсе падает сверху и не зависит от языка. box-shadow: 0 4px 12px так и остаётся физическим.
• Иконки с направлением. Стрелка «назад» должна смотреть в сторону начала строки — её переворачивают через transform: scaleX(-1) под [dir="rtl"].
• Привязка к физическому устройству. Вырез камеры, безопасные зоны, аппаратные особенности экрана — это про экран, а не про текст.
• Графика и координаты. Внутри SVG и на canvas работают собственные системы координат, логических свойств там нет.

<div dir="rtl">  <article class="review">    <p class="review__text">قهوة ممتازة والمكان هادئ.</p>    <p class="review__author">مارينا</p>  </article></div>

.review {  border-left: 3px solid #6544e0;  padding-left: 16px;  padding-right: 8px;  margin-top: 20px;  margin-bottom: 20px;  text-align: left;  width: 320px;  max-width: 100%;}​.review__text { margin: 0 0 6px; }.review__author { margin: 0; font-size: 13px; color: #666; }

1<div dir="rtl">2  <article class="review">3    <p class="review__text">قهوة ممتازة والمكان هادئ.</p>4    <p class="review__author">مارينا</p>5  </article>6</div>

1.review {2  border-inline-start: 3px solid #6544e0;3  padding-inline-start: 16px;4  padding-inline-end: 8px;5  margin-block: 20px;6  text-align: start;7  inline-size: 320px;8  max-inline-size: 100%;9}1011.review__text { margin: 0 0 6px; }12.review__author { margin: 0; font-size: 13px; color: #666; }