CSS direction — напрямок тексту справа наліво

Властивість direction вказує напрямов написання тексту.

Це актуально, наприклад, для арабських мов, де читання відбувається справа наліво. Властивість direction відповідає за наступне:

• спосіб відображення тексту в блоці;
• порядок колонок в таблиці;
• положення смуги прокрутки в блоці

Використовуйте rtl для мов, які пишуться справа наліво (на зразок івриту або арабської мови), і ltr для тих, які пишуться зліва направо (наприклад, українська, англійська та більшість інших мов). Зауважте, що напрямок тексту зазвичай визначається в межах документа (наприклад, з атрибутом dir у форматі HTML), а не за допомогою прямого використання властивості direction.

правити

Загальний опис

правити

Нотатка

Використовуйте цю властивість разом з властивістю unicode-bidi, щоб встановити підтримку декількох мов в одному документі.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

direction: ltr|rtl|initial|inherit;

Властивість direction може отримувати 4 значень:

ltr

Встановлює напрямок зліва направо

автор: Svitlana

правити

rtl

Встановлює напрямок справа наліво

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	2	1	1	9.2	12	5.5

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<p class="ltr">Звичайний напрямок: зліва направо.</p>
<p class="rtl">Той самий текст, але напрямок rtl.</p>

.ltr { direction: ltr; }
.rtl { direction: rtl; }

<p>Тут ми не задаємо спеціальних значень для властивостей напрямку тексту, зокрема <strong>direction</strong>. Значення береться без задання. Так як текст написаний українською мовою, то воно дорівнює <em>ltr</em>, тобто текст пишеться зліва направо.</p>
<p class="rtl">А для цього абзацу ми задали <strong>direction</strong> зі значенням <em>rtl</em>. Й текст тепер пишеться справа наліво.</p>

body {
  font-size: 18px;
  font-family: sans-serif;
}

.rtl {
  direction: rtl;
}

<p class="rtl">Це звичайне речення українською.</p>

<p class="right">Це звичайне речення українською.</p>

body {
  font-family: sans-serif;
  font-size: 18px;
  padding: 16px;
}

p {
  border: 1px solid #bbb;
  padding: 8px;
  margin: 0 0 12px;
}

/* напрям рядка: крапка йде на лівий край */
.rtl {
  direction: rtl;
}

/* лише вирівнювання: крапка лишається на місці */
.right {
  text-align: right;
}

<p>Цей приклад показує як працює властивість <code>direction</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити відображення тексту нижче.</p>

<p>У цьому прикладі, ми можемо змінювати напрямок тексту.</p>

<div class="inputs">
  <input id="ltr" checked name="direction" type="radio"/>
  <label for="ltr">ltr</label>
  <message for="ltr">Встановлює напрямок зліва направо.</message>
  
  <input id="rtl" name="direction" type="radio"/>
  <label for="rtl">rtl</label>
  <message for="rtl">Встановлює напрямок справа наліво.</message>
</div>

<p id="message">Встановлює напрямок зліва направо.</p>

<hr>

<p id="block">Це текст. <br> Просто текст для прикладу.</p>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: sans-serif;
}

#block {
  font-size: 1.75em; 
  direction: ltr;
}

message {
  display: none;
}

const message = document.querySelector('#message');

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('direction', this.id));

}));