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.

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

Порада

Якщо ви використовуєте фреймворки або бібліотеки для побудови інтерфейсу, такі як React або Vue, врахуйте, що властивість direction може бути задана через властивості компонентів. Це спрощує управління напрямком тексту в динамічних додатках. Наприклад, у React можна використовувати inline-стилі: <div style={{ direction: 'rtl' }}>.

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

Порада

Коли працюєте з мультимовними інтерфейсами, корисно зберігати налаштування напрямку тексту в локальному сховищі (localStorage) або стані додатку. Це дозволяє автоматично встановлювати правильний напрямок тексту при завантаженні сторінки, залежно від обраної мови користувача. Наприклад, localStorage.setItem('textDirection', 'rtl'); і при завантаженні сторінки document.body.style.direction = localStorage.getItem('textDirection');.

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

Порада

Не забувайте, що деякі елементи, такі як таблиці або форми, можуть мати свої специфічні потреби при зміні напрямку тексту. Перевіряйте відображення таких елементів у різних напрямках і, за потреби, використовуйте додаткові стилі для коректного вигляду. Наприклад, для таблиці може знадобитися додаткове вирівнювання заголовків або вмісту комірок:

const tableHeaders = document.querySelectorAll('th');
tableHeaders.forEach(header => {
    header.style.textAlign = 'right';
});

щоб забезпечити правильне вирівнювання у випадку зміни напрямку.

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

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

Синтаксис

element.style.direction

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<div id="content">Демонстраційний елемент</div>
<div id="languageSelector">Демонстраційний елемент</div>

// Функція для зміни напрямку тексту на основі вибраної мови
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);
});

<p id="textBlock">Цей текст перемкнеться у напрямок справа наліво.</p>

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';
    }
}

applyDirectionStyles('textBlock', 'rtl');