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

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

element.style.unicodeBidi - це властивість CSS, яку можна використовувати через JavaScript для зміни порядку відображення тексту з метою підтримки двонаправленого тексту (Bidi).

unicodeBidi працює в парі з іншою CSS властивістю direction. Властивість unicodeBidi визначає, як текстовий контент обробляється, коли в одному текстовому елементі використовується змішання правостороннього та лівостороннього тексту. Ця властивість може мати значення normal, embed або bidi-override.

Значення normal означає, що двонаправлений текст обробляється за замовчуванням згідно з алгоритмом Unicode для двонаправленого тексту. Це значення встановлюється за замовчуванням.

Значення embed створює новий рівень впровадження для тексту, дозволяючи змінювати напрямок тексту всередині цього елементу без впливу на оточуючий текст.

Значення bidi-override працює подібно до embed, але воно змушує весь текст відображатися у напрямку, визначеному властивістю direction, незалежно від його початкового напрямку.

Для використання властивості unicodeBidi через JavaScript, ви можете звертатися до неї як до частини об'єкту style конкретного HTML-елемента. Розглянемо приклади використання цієї властивості.

// Припустимо, у нас є елемент з id 'textElement'
var element = document.getElementById('textElement');

// Встановимо для елемента значення unicodeBidi як 'embed'
element.style.unicodeBidi = 'embed';

// Встановимо напрямок тексту як правосторонній
element.style.direction = 'rtl';

У цьому прикладі текст всередині елемента textElement буде оброблятися як вкладений і напрямок тексту буде змінено на правосторонній.

Ще один приклад, коли необхідно повністю змінити напрямок відображення тексту:

// Припустимо, у нас є елемент з id 'overrideText'
var overrideText = document.getElementById('overrideText');

// Встановимо для елемента значення unicodeBidi як 'bidi-override'
overrideText.style.unicodeBidi = 'bidi-override';

// Встановимо напрямок тексту як лівосторонній
overrideText.style.direction = 'ltr';

У цьому випадку весь текст в елементі overrideText буде відображатися зліва направо, навіть якщо він містить символи, які зазвичай відображаються справа наліво.

Таким чином, властивість element.style.unicodeBidi дозволяє вам контролювати, як змішаний текст відображається на вашій веб-сторінці, що особливо корисно для підтримки інтерфейсів на кількох мовах з різними напрямками письма.

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

Синтаксис

element.style.unicodeBidi

Переглядачі

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

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

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

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

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

Приклади

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

<p id="content">приклад тексту для перемикання напрямку</p>

function setTextDirectionBasedOnLanguage(elementId, language) {
    var element = document.getElementById(elementId);

    if (language === 'ar' || language === 'he') {
        element.style.direction = 'rtl';
        element.style.unicodeBidi = 'embed';
    } else {
        element.style.direction = 'ltr';
        element.style.unicodeBidi = 'embed';
    }
}

setTextDirectionBasedOnLanguage('content', 'ar'); // справа наліво
setTextDirectionBasedOnLanguage('content', 'en'); // назад, зліва направо

<div id="chatContainer"></div>

function addChatMessage(containerId, message, isRtl) {
    var container = document.getElementById(containerId);
    var newMessage = document.createElement('div');

    newMessage.textContent = message;

    if (isRtl) {
        newMessage.style.direction = 'rtl';
        newMessage.style.unicodeBidi = 'bidi-override';
    } else {
        newMessage.style.direction = 'ltr';
        newMessage.style.unicodeBidi = 'bidi-override';
    }

    container.appendChild(newMessage);
}

addChatMessage('chatContainer', 'مرحبا بك في الدردشة', true);
addChatMessage('chatContainer', 'Ласкаво просимо в чат', false);