Свойство CSS text-orientation
Свойство text-orientation определяет ориентацию символов в строке.
Оно имеет пять значений: mixed, upright, sideways, sideways-right и use-glyph-orientation. Все они работают в вертикальных режимах типографики. Значение sideways-left было удалено из спецификации, а sideways-right теперь сохраняется только как псевдоним для sideways. Для не-вертикальных систем письма вместо этого были добавлены значения sideways-lr и sideways-rl в свойство writing-mode.
INFO
Свойство text-orientation влияет только тогда, когда writing-mode имеет значение "vertical".
| Начальное значение | mixed |
|---|---|
| Применяется ко | Всем элементам, кроме групп строк таблиц, строк, групп столбцов и столбцов. |
| Наследуется | Да. |
| Анимация | Нет. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.textOrientation = "upright"; |
Синтаксис
Значения CSS text-orientation
text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit;Пример свойства text-orientation со значением "mixed":
Пример кода CSS text-orientation
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-rl;
text-orientation: mixed;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<p>Lorem ipsum is simply dummy text.</p>
</body>
</html>Результат
Пример свойства text-orientation со значением "upright":
Пример CSS text-orientation со значением upright
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-lr;
text-orientation: upright;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<p>Lorem ipsum is simply dummy text.</p>
</body>
</html>Пример свойства text-orientation:
Ещё один пример кода CSS text-orientation
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ffffff;
color: #000000;
font-size: 1.1em;
}
.example {
background: #cccccc;
color: #fff;
padding: 3em;
margin: 40px auto 0;
width: 400px;
max-width: 400px;
display: flex;
}
h1 {
color: #8ebf42;
margin: 0.15em 0.75em 0 0;
font-family: 'Bungee Shade', cursive;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
text-orientation: upright;
-webkit-font-feature-settings: "vkrn", "vpal";
font-feature-settings: "vkrn", "vpal";
}
p {
margin: 0;
line-height: 1.5;
font-size: 1.15em;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<div class="example">
<h1>Lorem Ipsum</h1>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| mixed | Горизонтальные письменности располагаются вертикально, а вертикальные письменности поворачиваются на 90° по часовой стрелке. Это значение по умолчанию для данного свойства. |
| upright | Все символы располагаются вертикально, независимо от их письменности. Не влияет на свойство direction. |
| sideways | Символы располагаются так, как если бы они были горизонтальными, но вся строка поворачивается на 90° по часовой стрелке. |
| sideways-right | Псевдоним для sideways, сохранённый для обратной совместимости. |
| use-glyph-orientation | Устаревшее. Ранее отображалось на устаревшие свойства SVG glyph-orientation-vertical и glyph-orientation-horizontal. Больше не поддерживается в современных браузерах. |
| initial | Заставляет свойство использовать значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Практика
В CSS какие свойства используются для управления вертикальной ориентацией текста?