Атрибут unicode-bidi в CSS

9 червня 2022 р.361

Зміст

У європейських мовах читання тексту відбувається зліва направо, у той час як є мови, де текст читається праворуч наліво. При змішуванні в одному документі різних за написанням знаків (російської з івритом, наприклад) в системі юнікод, їх напрямок визначається браузером з параметрів і вмісту тексту. Властивості unicode-bidi та direction задають, як повинен розташовуватися текст мови.

Коротка інформація

Значення за замовчуванням	normal
Успадковується	Ні
Застосовується	До всіх елементів
Анімується	Ні

Синтаксис

<code>unicode-bidi: normal | embed | bidi-override

Позначення

	Опис	Приклад
<тип>	Вказує тип значення.	<розмір>
A && B	Значення повинні виводитися у зазначеному порядку.	<розмір> && <колір>
A \| B	Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B).	normal \| small-caps
A \|\| B	Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку.	width \|\| count
[ ]	Групує значення.	[ crop \|\| cross ]
*	Повторювати нуль або більше разів.	[,<час>]*
+	Повторювати один або більше разів.	<число>+
?	Вказаний тип, слово або група не є обов'язковим.	inset?
{A, B}	Повторювати не менше A, але не більше B разів.	<радіус>{1,4}
#	Повторювати один або більше разів через кому.	<час>#

Значення

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

Пісочниця

-tablet is-6-desktop playground-values"> normal embed bidi-override

div { direction: rtl; unicode-bidi: <span class="playground-active">{{ playgroundValue }}</span>; }

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>unicode-bidi</title> <style> .rtl p { unicode-bidi: bidi-override; /* Змінюються характеристики тексту */
direction: rtl; /* Текст пишеться справа наліво */
}
</style>
</head>
<body> <div class="rtl"> <p>А троянда впала на лапу Азора.</p> <p>У лип Льоша знайшов пилку.</p> <p>І місту доріг город біля дороги.</p> <p>Вже я віники не в'яжу.</p> <p>Аргентина манить негра.</p> <p>Він дивний, паліндром — і ні морд, ні лап не видно.</p> <p>Але невидимий архангел, мороз візерунком ліг на храм і дивний він.</p> <p>Ліша на полиці клопа знайшов.</p> <p>Я не старий брат Сеня.</p>
</div>
</body>
</html>

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

Результат використання unicode-bidi та direction

Мал. 1. Результат використання unicode-bidi і direction

Об'єктна модель

Об'єкт.style.unicodeBidi

Специфікація

Специфікація	Статус
CSS Writing Modes Level 3	Рекомендація
CSS Level 2 Revision 1 (CSS 2.1)	Рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
Candidate Recommendation ( Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери


5.5	12	2	9.2	1.3	1


1	1	8	1.3

Браузери

У таблиці браузерів застосовуються такі позначення.

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

Кількість вказує версію браузера, починаючи з якої властивість підтримується.