01.02.2024 в 16:05

Создать макет с двунаправленным текстом еще никогда не было так просто 🙌

Иногда нам приходится поддерживать многоязычное приложение. Некоторые из них могут иметь другое направление, слева направо. Но как сохранить наши margins/padding одинаковыми? Я знаю, что для этого есть несколько инструментов, но на самом деле есть собственное решение.

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

margin-block-start
margin-block-end
margin-inline-start
margin-inline-end

padding-block-start
padding-block-end
padding-inline-start
padding-inline-end

inset-block-start
inset-block-end
inset-inline-start
inset-inline-end

border-block-start
border-block-end
border-inline-start
border-inline-end

Эти свойства аналогичны обычным свойствам, но имеют особый смысл.

Пример 1

Допустим, у нас есть контейнер с отступом: 20px 60px 80px 10px; (справа вверху слева внизу). Затем добавляем direction: rtl; изменить направление языка. Мы увидим, что наше правое заполнение составляет 60 пикселей, но нам нужно 10 пикселей, как и раньше, левое заполнение.

Вот почему нам нужны логические свойства.

padding-inline: 10px 60px;
padding-block: 20px 80px;

Если мы используем логические свойства, отступы также будут меняться вместе с направлением текста. В этом случае отступ справа 60 пикселей станет 10 пикселей и наоборот. То же самое работает и в режиме writing-mode: vertical-rl;

Вы можете поиграть с полями в коде в конце статьи.

Пример 2

Думаю, с полями и отступами все понятно. Но эти свойства работают и для границ.

Давайте посмотрим разницу для направления слева направо.

  border-inline-start: 10px solid #FFD54F; // left
  border-inline-end: 10px solid #4DD0E1; // right

Пример 3

Остался только один тип недвижимости. Как вы уже могли догадаться, inset-block/inset-inline позволяют нам применять логические свойства к элементам с абсолютным позиционированием.

Когда у нас есть элемент с позицией: Absolute; и используйте обычные свойства, мы не увидим никаких изменений. Но если мы воспользуемся inset-block/inset-inline и изменим направление текста, мы увидим, как изменится и положение элемента.

Попробуйте сами 😉

Бонус

Теперь вы знаете, как показать элемент по центру, используя одну строку CSS.

margin-inline: auto;

Источник:

#CSS

Войти на сайт