Свойство CSS text-orientation позволяет располагать текст вертикально, поворачивая строку на 90° по часовой стрелке. Чаще всего подобное используется для контента на азиатских языках, где написание осуществляется сверху вниз.
CSS text-orientation: параметры и особенности
Во многом это аналогично тому, как text-comb-upright разворачивает группы символов в строке в вертикальном направлении. Но он применяется для текстовых строк целиком.
Для создания двунаправленного текста, например, блока, который содержит текст, написанный слева направо и справа налево, потребуется свойство unicode-bidi. Оно сочетается со свойством direction и позволяет переопределить способ отображения текста браузером.
- Значение по дефолту: mixed | upright;
- Применимо к: всем элементам, кроме строк и колонок таблицы;
- Наследуемость: да;
- Возможность анимации: нет.
mixed: значение по умолчанию; горизонтально расположенные символы поворачиваются на 90° по часовой стрелке, а вертикально — отображаются в их естественной первоначальной ориентации.
upright: горизонтальные символы сохраняют свое дефолтное расположение; если в этом режиме повернуть строку текста так, чтобы символы располагались боком, то это значение повернет их на 90 ° в их естественное положение (это значение заставляет свойство direction принимать значение ltr; в результате все символы обрабатываются так, как если бы они располагались в режиме письма слева направо);
sideways: весь текст в режиме вертикального письма отображается боком, как если бы он был в горизонтальном расположении; вся строка поворачивается на 90° по часовой стрелке;
sideways-right: некоторые браузеры воспринимают это значение как синоним sideways, используемый для обратной совместимости.
Свойство use-glyph-orientation было удалено в декабре 2015 года. Оно использовалось в элементах SVG для определения свойств glyph-orientation-vertical и glyph-orientation-horizontal, которые на сегодняшний день являются устаревшими. Аналогом ориентации текста в SVG теперь является glyph-orientation-vertical.
<div class="text">Текст</div>
.text {
writing-mode: vertical-lr;
text-orientation: upright;
}
Поддержка браузерами CSS text-orientation
Ориентация текста в CSS3 является относительно новой возможностью и может претерпеть синтаксические изменения и в будущем. Она поддерживается всеми основными браузерами, кроме Internet Explorer. Для достижения полной кроссбраузерности можно прибегнуть к некоторым альтернативным вариантам.
Прежде чем использовать CSS свойство text-orientation, необходимо сначала изучить понятия блочного потока и направления встроенного потока.
Свойство writing-mode
Оно определяет, имеют ли строки текста горизонтальную или вертикальную ориентацию, и может принимать три значения:
- horizontal-tb;
- vertical-lr;
- vertical-rl.
Использование writing-mode предусматривает наличие двух ключевых понятий:
- Block Flow Direction: указывает направление, в котором текстовые блоки располагаются внутри своего родителя (сверху вниз, слева направо или справа налево;
- Inline Flow Direction: определяет направление символов внутри строки текста и место начала новой строки (может быть как горизонтальным, так и вертикальным).
Чтобы добиться вертикальной ориентации текста, достаточно установите для свойства writing-mode значение vertical-lr (или vertical-rl), а для text-orientation — upright.
<div class="block">
<p class="horizontal-tb">Образец текста</p>
<p class="vertical-rl">Образец текста</p>
<p class="vertical-lr">Образец текста</p>
</div>.block {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: auto;
font-size: 2rem;
color: #fff;
background: #000;
}
.horizontal-tb {
writing-mode: horizontal-tb;
}
.vertical-rl {
writing-mode: vertical-rl;
}
.vertical-lr {
writing-mode: vertical-lr;
}
Альтернативные методы
Word-break
Определяет, как происходит разрыв строки, когда текст достигает ее конца и переполняет родительский контейнер.
- normal: значение по умолчанию (перенос строки возможен только при явном его указании, например при помощи тега <br>;
- break-all: во избежание переполнения родителя последнее слово разбивается с переносом на новую строку (не применимо к текстам на китайском, японском и корейском языках);
- keep-all: действует как normal, но для китайского, японского и корейского языков слова не переносятся;
- break-word: во избежание переполнения блока остающиеся целыми слова разбиваются произвольно при отсутствии более подходящего места для переноса строки.
В отличие от text-orientation, свойство word-break поддерживается всеми браузерами, включая все версии Internet Explorer.
Создание вертикального текста с помощью свойства word-break
Для этого потребуется уменьшить ширину контейнера до 0 пикселей. Это приведет к тому, что все слова будут разбиты на буквы и выстроятся вертикально. В этом случае следует также установить свойство white-space для предварительного переноса. Это позволит обеспечить наличие пробелов, чтобы можно было различать слова.
<div class="block"> <p>Образец текста</p> </div>
.block {
margin: auto;
color: #fff;
background: #000;
width: 0;
padding: 0 10px;
word-break: break-all;
}
Word-wrap/overflow-wrap
Позволяет разбивать длинные слова и переносить их на следующую строку и имеет полную поддержку браузерами. В отличие от word-wrap, альтернативное свойство overflow-wrap пока только частично воспринимается IE.
- normal: перенос строк осуществляется при явном указании, например с помощью тега <br>;
- break-word: позволяет автоматически разрывать слова для переноса в произвольной точке;
- initial: устанавливает значение по умолчанию;
- inherit: передает значение свойства от родительского элемента дочернему.
Создание вертикального текста свойством word-wrap
Этот вариант позволяет использовать аналогичный подход, что и в случае с применением word-break. Достаточно уменьшить ширину контейнера до 0 пикселей и заставить каждое слово разбиваться на отдельные буквы, которые выстраиваются вертикально. Также потребуется применить свойство white-space для предварительного переноса, чтобы обеспечить наличие пробелов. Это позволит нормально различать слова.
Тег br
Самый примитивный метод достижения вертикальной ориентации текста — использование тегов <br>. Однако этот метод не очень практичен, и его не следует использовать, если строка текста слишком длинная.
Обертывание в тег span
Еще один популярный метод — обернуть каждую букву текста в тег span и с помощью CSS назначить им display: block. Как и использование тега <br>, этот способ не очень удобен для больших текстовых строк.
Использование JavaScript
Вместо двух предыдущих методов лучше использовать JavaScript для динамического добавления оболочки из тегов вокруг каждой буквы вместо того, чтобы делать это вручную. В этом случае текст разбивается на массив, и каждый его элемент оборачивается тегом span.
Заключение
Создание вертикально текста всегда было проблемой в CSS с незапамятных времен. Ни один из возможных способов не мог гарантировать безупречный результат. Однако введение нового свойства text-orientation в CSS3 полностью решило эту проблему. Несмотря на это, не следует забывать о резервных вариантах для Internet Explorer, чтобы обеспечить максимальную кроссбраузерность.
