Логічні CSS-властивості для RTL в Elementor: відступи без окремих правил

Чим фізичні властивості відрізняються від логічних

У традиційному CSS відступ зліва задають через margin-left або padding-left. Для RTL це може бути не та сторона, яку користувач сприймає як початок рядка. Логічні властивості враховують direction: у LTR inline-start відповідає лівій стороні, а в RTL — правій.

Властивість inline описує горизонтальний напрямок тексту, а block — напрямок розміщення блоків. Тому padding-inline відповідає горизонтальним внутрішнім відступам, а padding-block — вертикальним.

• margin-inline — горизонтальні зовнішні відступи з обох боків.
• padding-inline — горизонтальні внутрішні відступи з обох боків.
• margin-inline-start — відступ на початку рядка.
• margin-inline-end — відступ у кінці рядка.
• padding-block — вертикальні внутрішні відступи.
• inset-inline-start — позиціонування від початку рядка для елементів із position.

.content-block {
  padding-inline: 24px;
  margin-inline: auto;
}

Як додати логічні властивості в Elementor

Спочатку виберіть контейнер або віджет, до якого потрібно застосувати правило. У його налаштуваннях додайте CSS-клас, наприклад content-block, без крапки. Крапка використовується вже в CSS-селекторі.

CSS можна додати через Custom CSS, якщо така можливість доступна у вашій конфігурації Elementor, або через загальні стилі теми чи WordPress. Важливо розміщувати правило там, де воно завантажуватиметься для потрібних сторінок і не буде випадково обмежене лише редактором.

Після збереження відкрийте сторінку у звичайному режимі, а не тільки в редакторі Elementor. Перевірте, чи клас присутній у HTML і чи не перекривається правило стилями віджета, теми або адаптивними налаштуваннями.

• У полі класів в Elementor вказуйте content-block, а не .content-block.
• Один клас можна використовувати для групи однотипних блоків.
• Для одного виняткового елемента краще використовувати окремий клас, а не змінювати загальне правило.
• Після змін очистіть кеш плагіна кешування, CDN або браузера, якщо старі стилі продовжують відображатися.

.content-block {
  padding-inline: 24px;
  margin-inline: auto;
}

Точкові відступи для початку та кінця рядка

Коли однаковий відступ зліва і справа не підходить, використовуйте inline-start та inline-end. Це корисно для карток, іконок, декоративних елементів і текстових блоків, які мають зміщуватися разом із напрямком письма.

Наприклад, у LTR margin-inline-start: 40px створить відступ зліва. У RTL той самий запис створить відступ справа. Окремих правил для арабської версії не потрібно, якщо напрямок RTL коректно заданий на сторінці або контейнері.

• inline-start — початок рядка: ліворуч у LTR і праворуч у RTL.
• inline-end — кінець рядка: праворуч у LTR і ліворуч у RTL.
• block-start і block-end пов’язані з вертикальним напрямком, а не з лівою чи правою стороною.
• Логічні властивості не визначають напрямок самостійно — вони лише реагують на вже встановлений direction.

.content-block {
  margin-inline-start: 40px;
  padding-inline-end: 16px;
}

Приклади для типових елементів Elementor

Логічні властивості зручно застосовувати до секцій, контейнерів, кнопок, карток і декоративних елементів. Вони особливо корисні там, де елемент має візуальний зв’язок із початком або кінцем текстового рядка.

Для кнопки з іконкою можна задати проміжок і внутрішні відступи без прив’язки до лівої або правої сторони. Якщо іконка або її позиція змінюється в RTL окремим правилом, перевірте, чи не дублює це логіку flex-контейнера.

• Для контентної області: padding-inline та margin-inline.
• Для бейджа або декоративної лінії: inset-inline-start або inset-inline-end.
• Для рамки з одного боку: border-inline-start або border-inline-end.
• Для скруглення кутів: border-start-start-radius та інші логічні варіанти, якщо дизайн має залежати від напрямку.
• Для фіксованого елемента: inset-inline-start замість left, а inset-inline-end замість right.

.icon-label {
  padding-inline-start: 12px;
  border-inline-start: 3px solid #2f6fed;
}

.badge {
  position: absolute;
  inset-inline-end: 16px;
  inset-block-start: 16px;
}

Як правильно налаштувати та перевірити напрямок RTL

Логічні властивості працюють коректно лише тоді, коли браузер знає напрямок тексту. Для арабської версії це зазвичай має бути direction: rtl на рівні HTML-документа або відповідного мовного контейнера. Для української та англійської — direction: ltr.

Не варто примусово встановлювати direction: rtl для кожного віджета. Це може змінити вирівнювання тексту, порядок flex-елементів і поведінку вкладених компонентів. Краще задавати напрямок на рівні сторінки, мовної версії або великого контейнера, а локальні винятки створювати лише за потреби.

• Перевірте сторінку в LTR і RTL, а не лише в одному напрямку.
• Окремо протестуйте мобільну, планшетну та десктопну ширину.
• Перевірте меню, картки, кнопки, слайдери, форми та блоки з position: absolute.
• У DevTools подивіться обчислені значення margin і padding та переконайтеся, що потрібне правило не перекреслене.
• Перевірте довгі арабські заголовки й тексти: вони можуть змінити висоту блоків навіть за правильних відступів.

[dir="rtl"] .content-block {
  /* Додавайте цей блок лише для винятків,
     якщо логічних властивостей недостатньо */
}

[dir="ltr"] {
  direction: ltr;
}

[dir="rtl"] {
  direction: rtl;
}

Поширені помилки та обмеження

Найчастіша помилка — змішування фізичних і логічних властивостей в одному компоненті. Наприклад, padding-inline-start може бути перекритий пізнішим padding-left або адаптивним правилом Elementor. Визначте єдиний підхід для конкретного компонента й перевірте порядок завантаження стилів.

Ще одна проблема виникає, коли direction змінюють на дочірньому елементі, але очікують, що весь макет автоматично перебудується. Напрямок тексту, порядок flex-елементів і розташування абсолютно позиціонованих елементів можуть потребувати окремої перевірки.

Логічні властивості не замінюють усі RTL-налаштування. Іконки зі стрілками, фонові зображення, SVG, слайдери та спеціальні анімації можуть мати власну орієнтацію. Їх потрібно тестувати окремо.

• Не ставте крапку перед назвою класу в полі Elementor.
• Не використовуйте margin-inline: auto, якщо елемент не має обмеженої ширини або не повинен центруватися.
• Не плутайте padding-inline з padding-block: перший змінює горизонтальні, другий — вертикальні відступи.
• Не дублюйте однакові правила для LTR і RTL без потреби.
• Не вважайте, що правильні відступи автоматично виправлять порядок елементів у складному flex або grid-макеті.

.content-block {
  margin-inline: auto;
  max-inline-size: 960px;
  padding-inline: 24px;
  padding-block: 32px;
}