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

Представьте, что у нас есть аватарки пользователей:

.avatar {
  margin-right: .5em;
}

/* Если пользователь смотрит арабскую версию сайта,
   в которой текст пишется справа налево,
   меняем отступы у аватарки: сбрасываем правый, добавляем левый */
html[dir="rtl"] .avatar {
  margin-right: 0;
  margin-left: .5em;
}
В английской версии
Vasily
В арабской версии
فاسيلي

Свойства margin-left и margin-right привязаны к сторонам экрана: неважно, в каком направлении написан текст в текущей версии сайта, margin-left и margin-right всегда задают левый и правый отступы.

В вебе не принято писать текст вертикально: плохая поддержка браузерами и операционными системами. На сайтах с текстом на языках Восточной Азии пишут сверху вниз и слева направо.

«Японский» в примерах ниже — это возможное вертикальное письмо на японском, приведённое для иллюстрации

Логические свойства привязаны не к сторонам экрана, а к направлению письма. Они задают отступы, рамки и позиционирование, опираясь на инлайновую (inline) и блочную (block) оси. Инлайновая ось проходит в направлении, в котором пишется текст. Например, в тексте, написанном на русском или английском, инлайновая ось пройдёт слева направо, в тексте на арабском — справа налево, а в тексте на японском — сверху вниз. Блочная ось идёт перпендикулярно инлайновой и имеет своё направление. Например, в тексте, написанном на японском — справа налево, а в монгольском — слева направо.

В вебе не принято писать текст вертикально: плохая поддержка браузерами и операционными системами. На сайтах с текстом на языках Восточной Азии пишут сверху вниз и слева направо.

«Японский» в примерах ниже — это возможное вертикальное письмо на японском, приведённое для иллюстрации

Вот, что задают логические свойства в зависимости от направления письма:

Свойство

block‑size

inline‑size

max‑block‑size

max‑inline‑size

min‑block‑size

min‑inline‑size

Английский

height

width

max‑height

max‑width

min‑height

min‑width

Арабский

height

width

max‑height

max‑width

min‑height

min‑width

Японский

width

height

max‑width

max‑height

min‑width

min‑height

Используя логические свойства, мы задаём отступы не влево‑вправо или вверх‑вниз, а в направлении начала и конца письма: start — это left для текста на русском, но right для текста на арабском; end — это right для текста на английском, но left для текста на арабском.

Свойство

margin‑block‑start

margin‑block‑end

margin‑inline‑start

margin‑inline‑end

padding‑block‑start

padding‑block‑end

padding‑inline‑start

padding‑inline‑end

Английский

margin‑top

margin‑bottom

margin‑left

margin‑right

padding‑top

padding‑bottom

padding‑left

padding‑right

Арабский

margin‑top

margin‑bottom

margin‑right

margin‑left

padding‑top

padding‑bottom

padding‑right

padding‑left

Японский

margin‑right

margin‑left

margin‑top

margin‑bottom

padding‑right

padding‑left

padding‑top

padding‑bottom

С логическими свойствами наш пример сокращается до одной строчки:

.avatar {
  margin-inline-end: .5em;
}
В английской версии
Vasily
В арабской версии
فاسيلي

Ещё по теме

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы