CSS unicode-bidi — порядок двонаправленого тексту
Властивість unicode-bidi задає напрямок відображення тексту.
Використовується разом з властивістю direction для підтримки декількох мов в одному документі.
Браузер інколи може не зрозуміти дві різні мови в одному документі і може відобразити одну з них неправильно, наприклад, арабську, яка має бути відображена справа наліво. Ця властивість примусово змушує браузер відображити текст в потрібному напрямку.
Наприклад, якщо блок контенту містить текст, який пишеться зліва направо, так і текст, який пишеться справа наліво, то бразер використовує складний алгоритм, щоб вирішити, як правильно його відображати. Властивість unicode-bidi вимикає застосування цього алгоритму і дозволяє розробнику самому керувати вставкою тексту.
Загальний опис
автор: NagarD
Синтаксис
unicode-bidi: normal|embed|bidi-override|intitial|inherit;Властивість unicode-bidi може отримувати 5 значень:
-
normal -
Браузер самостійно визначає, як йому слід відображати текст на основі символів Unicode
автор: Svitlana -
embed -
Перевизначає параметри тексту, розташовуючи його, як зазначено у властивості
автор: Svitlanadirection -
bidi-override -
Аналогічний
автор: Svitlanaembed, але ще й змінюється порядок символів в тексті на зворотній. -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена).
автор: Svitlana
| Значення без задання: | normal |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.unicodeBidi="bidi-override" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 2 | 1 | 1.3 | 9.2 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
bidi-override разом із direction: rtl примусово малює символи справа наліво — рядок читається задом наперед. Без override алгоритм двоспрямованого тексту сам вирішив би порядок.
HTML
<div class="over">Цей текст виведено у зворотному порядку.</div>
<div>А цей — звичайний.</div>CSS
.over {
direction: rtl;
unicode-bidi: bidi-override;
}Ім'я справа наліво в українському реченні: без ізоляції двокрапка й число перестрибують, unicode-bidi: isolate це лікує.
HTML
<ul>
<li>Учасник <span>עברית</span>: 90 балів — без ізоляції</li>
<li>Учасник <span class="iso">עברית</span>: 90 балів — з isolate</li>
</ul>CSS
li {
margin-bottom: 8px;
font-size: 18px;
}
span {
padding: 0 2px;
background: #ffe9b3;
}
.iso {
unicode-bidi: isolate;
}Значення у дії
HTML
<p>Цей приклад показує як працює властивість <code>unicode-bidi</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити відображення тексту нижче.</p>
<p>У цьому прикладі, ми можемо змінювати напрямок тексту та символів.</p>
<div class="inputs">
<input id="normal" checked name="unicode-bidi" type="radio"/>
<label for="normal">normal</label>
<message for="normal">Браузер самостійно визначає, як йому слід відображати текст на основі символів Unicode.</message>
<input id="bidi-override" name="unicode-bidi" type="radio"/>
<label for="bidi-override">bidi-override</label>
<message for="bidi-override">Змінюється порядок символів в тексті на зворотній.</message>
</div>
<p id="message">Браузер самостійно визначає, як йому слід відображати текст на основі символів Unicode.</p>
<hr>
<p id="block">Це текст. <br> Просто текст для прикладу.</p>CSS
* {
box-sizing: border-box;
padding: 0;
}
body {
font-family: sans-serif;
}
#block {
font-size: 1.75em;
direction: rtl;
unicode-bidi: normal;
}
message {
display: none;
}JS
const message = document.querySelector('#message');
document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {
var messageText = document.querySelector("message[for='" + this.id + "']");
message.textContent = messageText?.textContent ?? '';
document.querySelectorAll('#block').forEach((n) => n.style.setProperty('unicode-bidi', this.id));
}));Приклад використання
HTML
<h3>unicode-bidi: normal | embed | bidi-override</h3>
<div class="table">
<div>
<span class="to-mixed">Lorem ipsum dolor sit, amet consectetur adipisicing.</span>
<p>unicode-bidi: normal</p>
</div>
<div>
<span class="to-upright">Lorem ipsum dolor sit, amet consectetur adipisicing.</span>
<p>unicode-bidi: embed</p>
</div>
<div>
<span class="to-sideways">Lorem ipsum dolor sit, amet consectetur adipisicing.</span>
<p>unicode-bidi: bidi-override</p>
</div>
</div>CSS
body{
position: relative;
margin: 0px;
padding: 20px;
font-family: "Arial";
font-size: 18px;
}
h3{margin-top: 0px; color: #555; text-align: center;}
.table{
display: table;
width: 100%;
height: 100%;
min-height: 200px;
position: relative;
box-shadow: 0px 0px 2px #999;
}
.table div{
display: table-cell;
position: relative;
background: white;
vertical-align: middle;
height: 300px;
box-sizing: border-box;
padding: 20px;
text-align: center;
box-shadow: inset 0px 0px 2px #999;
}
span{
writing-mode: vertical-rl;
unicode-bidi: bidi-override;
display: inline-block;
background: white;
padding: 20px 15px;
color: black;
border: 1px dashed blue;
}
/*1*/
.to-mixed{
/* direction: rtl; */
unicode-bidi: normal;
}
.to-upright{
direction: rtl;
unicode-bidi: embed;
}
.to-sideways{
direction: rtl;
unicode-bidi: bidi-override;
}Коментарі
Коментарів ще немає — будьте першим!