Двунаправленные горизонтальные правила в CSS

Атрибут dir в HTML и свойство dir в CSS можно использовать, чтобы задать направление текста и горизонтального потока. Некоторые языки используют написание слева направо (LTR), а другие — справа налево (RTL).  Создание интерфейса для поддержки макетов LTR и RTL является сложной задачей. Технологии Flexbox и Grid упрощает этот процесс, но не до конца.

В CSS доступно множество свойств для указания направления. Например, при создании горизонтальных элементов дизайна отступ задается только для родительского элемента. А для первого и последнего дочерних элементов правый отступ равный 0.

.element {
    margin-right: 1rem;
}

.element:last-child {
    margin-right: 0;
}

Или:

.element:not(:last-child) {
    margin-right: 1rem;
}

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

Чтобы выделить цитаты, обычно мы добавляем границу с той стороны цитаты, которую мы считаем предшествующей ей.

.content blockquote {
    background-color: #f5f5f5;
    border-left: 5px solid #dbdbdb;
    padding: 1.25em 1.5em;
}

Есть много других CSS-стилей, в которых мы указываем направление (лево / право). Но на самом деле мы имеем в виду до или после. Поэтому при создании интерфейсов, которые поддерживают LTR и RTL-макеты следует использовать следующие правила написания CSS-кода:

.class {}

html[dir="rtl"] .class {}

Также можно подгружать  разный CSS для макетов LTR и RTL. Но оба варианта реализации подразумевают увеличение объема кода.

А нельзя ли указать браузеру, что нам нужна сторона до или после элемента, а не направления (лево или право).

Для этого в CSS включает логические свойства: inline-start и inline-end:

.element:not(:last-child) {
    margin-inline-end: 1rem;
}

Вместо использования top и bottom мы можем использовать block-start и block-end. Поэтому можно написать один набор CSS-правил для макетов LTR и RTL. Ниже приведен пример использования свойства margin-inline-end:

Пример использования свойств border-inline-start и padding-inline-start:

Браузер Firefox также поддерживает свойство border-*-*-radius. Поэтому можно указывать различные углы с помощью border-start-start-radius, border-end-start-radius и т.д.

Все демо-версии:

Поддержка браузерами

  • Логические свойства
  • border-*-*-radius

Пожалуйста, опубликуйте ваши отзывы по текущей теме статьи. За комментарии, отклики, дизлайки, лайки, подписки огромное вам спасибо!

Пожалуйста, оставляйте ваши отзывы по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, отклики, подписки, лайки!

Вадим Дворниковавтор-переводчик статьи «Bidirectional horizontal rules in CSS»