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 дозволяє вам контролювати, як змішаний текст відображається на вашій веб-сторінці, що особливо корисно для підтримки інтерфейсів на кількох мовах з різними напрямками письма.
| Порада: | Коли потрібно відображати числові значення разом з текстом на мові, яка пишеться справа наліво, використовуйте |
| Порада: | Якщо у вас виникають проблеми з відображенням тексту в елементах списку або таблиці, спробуйте застосувати |
| Порада: | Використання |
Синтаксис
element.style.unicodeBidiЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі користувач може вибирати напрямок тексту (ліворуч-праворуч або праворуч-ліворуч) за допомогою перемикачів. В залежності від вибору, текст в елементі буде відображатися відповідним чином, що демонструє роботу властивості unicodeBidi у поєднанні з direction.
Цей приклад показує, як можна динамічно змінювати напрямок тексту на веб-сторінці на основі мови, обраної користувачем. Це особливо корисно для багатомовних веб-сайтів, де важливо, щоб текст правильно відображався для користувачів, які говорять різними мовами з різними напрямками письма.
// Функція для зміни напрямку тексту на основі обраної мови
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'); // Встановить напрямок тексту зліва направо для англійської
У цьому прикладі показано, як можна додавати повідомлення в чат з підтримкою двонаправленого тексту. Використання властивості unicodeBidi дозволяє забезпечити правильне відображення тексту, незалежно від мови повідомлення. Це корисно для міжнародних чат-додатків, де користувачі можуть спілкуватися різними мовами.
// Функція для додавання повідомлення в чат з підтримкою двонаправленого тексту
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', 'Welcome to the chat', false); // Повідомлення зліва направо (англійською)