JS властивість CSSStyleDeclaration.direction

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

element.style.direction визначає напрямок тексту в елементі: зліва направо (LTR) або справа наліво (RTL). Ця властивість корисна для підтримки багатомовних веб-додатків, особливо тих, які використовують мови з правим напрямком письма, такі як арабська або іврит.

Для використання element.style.direction, спочатку необхідно отримати доступ до HTML-елемента через JavaScript. Після цього можна встановити значення цієї властивості, щоб змінити напрямок тексту.

Приклад 1: Встановлення напрямку тексту зліва направо

// Отримуємо елемент за його ідентифікатором
const paragraph = document.getElementById('myParagraph');

// Встановлюємо напрямок тексту зліва направо
paragraph.style.direction = 'ltr';

У цьому прикладі ми отримуємо елемент з ідентифікатором myParagraph і встановлюємо для нього напрямок тексту зліва направо (LTR). Це стандартний напрямок для більшості мов, включаючи англійську та українську.

Приклад 2: Встановлення напрямку тексту справа наліво

// Отримуємо елемент за його ідентифікатором
const paragraph = document.getElementById('myParagraph');

// Встановлюємо напрямок тексту справа наліво
paragraph.style.direction = 'rtl';

У цьому прикладі ми змінюємо напрямок тексту на справа наліво (RTL), що є необхідним для таких мов, як арабська або іврит. Це допомагає правильно відображати текст і забезпечувати кращу читабельність для носіїв цих мов.

Зміна напрямку тексту динамічно

element.style.direction можна змінювати динамічно, наприклад, в залежності від обраної користувачем мови інтерфейсу.

// Функція для зміни напрямку тексту в залежності від вибраної мови
function changeTextDirection(language) {
    const content = document.getElementById('content');
    
    if (language === 'ar' || language === 'he') {
        content.style.direction = 'rtl';
    } else {
        content.style.direction = 'ltr';
    }
}

// Виклик функції з мовою арабською
changeTextDirection('ar');

У цьому прикладі ми створюємо функцію changeTextDirection, яка приймає параметр language і змінює напрямок тексту в елементі content залежно від мови. Якщо мова арабська або іврит, текст відображається справа наліво, для інших мов - зліва направо.

Загалом, element.style.direction є корисною властивістю для налаштування напрямку тексту в HTML-елементах, що дозволяє підтримувати багатомовність і забезпечувати коректне відображення тексту для різних мов. Використання цієї властивості дозволяє динамічно адаптувати контент в залежності від обраної користувачем мови, покращуючи загальний користувацький досвід.

Порада:	Щоб змінити напрямок тексту у всіх дочірніх елементах, встановіть властивість `direction` на батьківському елементі. Це спрощує роботу з великими блоками тексту, оскільки вам не потрібно змінювати напрямок для кожного окремого елемента. Наприклад, `document.getElementById('container').style.direction = 'rtl';` автоматично змінить напрямок тексту для всіх дочірніх елементів `container`.
Порада:	Якщо ви використовуєте фреймворки або бібліотеки для побудови інтерфейсу, такі як React або Vue, врахуйте, що властивість `direction` може бути задана через властивості компонентів. Це спрощує управління напрямком тексту в динамічних додатках. Наприклад, у React можна використовувати inline-стилі: `<div style={{ direction: 'rtl' }}>`.
Порада:	Коли працюєте з мультимовними інтерфейсами, корисно зберігати налаштування напрямку тексту в локальному сховищі (localStorage) або стані додатку. Це дозволяє автоматично встановлювати правильний напрямок тексту при завантаженні сторінки, залежно від обраної мови користувача. Наприклад, `localStorage.setItem('textDirection', 'rtl');` і при завантаженні сторінки `document.body.style.direction = localStorage.getItem('textDirection');`.
Порада:	Не забувайте, що деякі елементи, такі як таблиці або форми, можуть мати свої специфічні потреби при зміні напрямку тексту. Перевіряйте відображення таких елементів у різних напрямках і, за потреби, використовуйте додаткові стилі для коректного вигляду. Наприклад, для таблиці може знадобитися додаткове вирівнювання заголовків або вмісту комірок: `const tableHeaders = document.querySelectorAll('th'); tableHeaders.forEach(header => { header.style.textAlign = 'right'; });` щоб забезпечити правильне вирівнювання у випадку зміни напрямку.

Синтаксис

element.style.direction

Значення

Return

Переглядачі

Переглядач
	1	1	3	8	12

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

Переглядач
	-	-

Приклади

Цей приклад показує, як можна використовувати властивість element.style.direction для зміни напрямку тексту в елементі на веб-сторінці. За допомогою перемикача користувач може вибрати між напрямками "LTR" (зліва направо) і "RTL" (справа наліво), що дозволяє зручно адаптувати вміст для різних мов.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/dyEEBea">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми використовуємо функцію setTextDirection, щоб змінити напрямок тексту в елементі content залежно від обраної користувачем мови. Це корисно для мультимовних додатків, де необхідно динамічно змінювати напрямок тексту для правильного відображення вмісту, наприклад, при виборі арабської чи івриту.

// Функція для зміни напрямку тексту на основі вибраної мови
function setTextDirection(language) {
    const content = document.getElementById('content');
    
    if (language === 'ar' || language === 'he') {
        content.style.direction = 'rtl';
    } else {
        content.style.direction = 'ltr';
    }
}

// Виклик функції при зміні мови
document.getElementById('languageSelector').addEventListener('change', function(event) {
    setTextDirection(event.target.value);
});

У цьому прикладі ми використовуємо функцію applyDirectionStyles, щоб не тільки змінити напрямок тексту в елементі textBlock, але й налаштувати відповідні стилі, такі як вирівнювання тексту і відступи. Це дозволяє адаптувати вигляд елемента до різних напрямків тексту, забезпечуючи естетичний та функціональний інтерфейс для користувачів.

// Функція для встановлення напрямку та стилів тексту
function applyDirectionStyles(elementId, direction) {
    const element = document.getElementById(elementId);
    element.style.direction = direction;
    
    if (direction === 'rtl') {
        element.style.textAlign = 'right';
        element.style.marginRight = '20px';
        element.style.marginLeft = '0';
    } else {
        element.style.textAlign = 'left';
        element.style.marginLeft = '20px';
        element.style.marginRight = '0';
    }
}

// Застосування стилів для елемента з id 'textBlock'
applyDirectionStyles('textBlock', 'rtl');

JS довідник

JavaScript

Наповнення JS розділу