css властивість text-orientation

Властивість text-orientation визначає орієнтацію текстових символів у рядку.

Властивість text-orientation має лише ефект у вертикальному режимі, тобто коли для writing-mode задано значення відмінне від horizontal-tb.

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

правити

Нотатка

Значення властивості sideways працює тільки у брайзері Firefox починаючи з версії 44.0.

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

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

Синтаксис

text-orientation: mixed | upright | sideways;

Властивість text-orientation може отримувати 3 значень:

mixed

Поворот символів на 90°. Без задання.

автор: Svitlana

правити

upright

Показує горизонтальні символи природно (вертикально), а також гліфи для них. Зауважте, що це ключове слово призводить до того, що всі символи розглядаються як "зліва направо": використовується значення напряму примусово становити ltr.

автор: Svitlana

правити

sideways

Весь текст буде накладено в бік (повернутий на 90° за годинниковою стрілкою), як у горизонтальному розташуванні.

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
text-orientation	48.0	41.0	Не підтримується	35.0	Не підтримується	Не підтримується

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

Переглядач
text-orientation	48.0	41.0	Не підтримується

Приклади

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

<p class="mixed">Vertical 2026 текст</p>
<p class="up">Vertical 2026 текст</p>

p {
    display: inline-block;
    writing-mode: vertical-rl;
    height: 200px;
    margin-right: 32px;
}

.mixed { text-orientation: mixed; }
.up    { text-orientation: upright; }