Орієнтація на текст - CSS-хитрощі

text-orientationВластивість в CSS задає вирівнювання тексту в рядку при роботі з вертикальним writing-mode. В основному, він повертає лінію на 90 ° за годинниковою стрілкою, щоб допомогти контролювати відображення вертикальних мов - подібно до того, як text-combine-uprightобертаються групи символів у рядку тексту у вертикальному сценарії, але для повних рядків тексту.

.element ( text-orientation: mixed; writing-mode: vertical-rl; )

Для роботи з двонаправленим текстом - блоком, який містить як текст зліва направо, так і справа наліво - перевірте unicode-bidiвластивість. Він поєднується з directionвластивістю, щоб замінити те, як браузер вирішує відображати текст.

Синтаксис

text-orientation: mixed | upright | sideways

Початковий: mixed
Застосовується до: усіх елементів, крім груп рядків таблиці, рядків, груп стовпців та стовпців
Успадковано: так
Відсотки: н / д
Обчислене значення: вказане значення
Тип анімації: не анімаційний

Цінності

/* Keyword values */ text-orientation: mixed; /* default */ text-orientation: upright; text-orientation: sideways; text-orientation: sideways-right; /* Global values */ text-orientation: inherit; text-orientation: initial; /* mixed */ text-orientation: unset;

mixed: Значення за замовчуванням. Символи горизонтального сценарію повертаються на 90 ° за годинниковою стрілкою. Символи у вертикальному сценарії відображаються у природній вертикальній орієнтації.
upright: Символи в горизонтальному сценарії встановлюються в їх природному горизонтальному вертикальному положенні, включаючи деякі гліфи. Отже, там, де вертикальний режим запису може повертати рядок тексту так, щоб символи були вбік, це значення поверне самих символів на 90 ° до їх природного положення. Зверніть увагу, що це значення змушує directionвластивість ltrперейти до використовуваного значення , тобто всі символи обробляються так, ніби вони перебувають у режимі запису зліва направо.
sideways: Весь текст у вертикальному режимі письма відображається вбік, як якщо б він був у горизонтальному макеті, але весь рядок повернутий на 90 ° за годинниковою стрілкою.
sideways-right: Деякі браузери поважають це значення як псевдонім sidewaysзначення, яке зберігається для зворотної сумісності.

use-glyph-orientationбуло вилучено як значення ключового слова у грудні 2015 року. Він використовувався на елементах SVG для визначення властивостей SVG glyph-orientation-verticalі glyph-orientation-horizontalякі зараз застаріли. glyph-orientation-verticalтепер псевдонім для text-orientation.

Підтримка браузера

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

Робочий стіл

Chrome	Firefox	IE	Край	Сафарі
48	41	Ні	79	10,1 *

Мобільний / планшетний

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	10,0-10,2

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

Режими написання CSS рівень 3 (проект редактора)

Більше інформації

Чому вертикальна орієнтація тексту є кошмаром для сумісності між браузерами? від Nikhil - thoroughрунтовне пояснення text-orientationта writing-mode.
Легко створюйте побічний текст, використовуючи властивість CSS у режимі письма від Adi Purdila - вивчіть різні підходи на додаток до використання text-orientation.
2 способи створення вертикального тексту в CSS за допомогою WS Toh - Більш пряме порівняння між підходами, що використовують writing-modeта text-orientation.
Поворот тексту Крісом Койєром - підхід до вертикального тексту, який використовує transformзамість writing-modeабо text-orientation.