Изменение направления текста на вертикальный с помощью css text-orientation

Как сделать вертикальный текст с помощью css text-orientation

11.01.2021
1013
7 мин.
0

Написание вертикального текста при верстке сайта возможно различными методами, но все ли они одинаковы хороши? Нет. Есть такие, которых стоит избегать или хотя бы не злоупотреблять. Наиболее распространенным способом в этом случае является свойство 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

Безусловно, ориентация текста в CSS является относительно новой возможностью и может претерпеть синтаксические изменения и в будущем. Она поддерживается всеми основными браузерами, кроме Internet Explorer. Для достижения полной кроссбраузерности можно прибегнуть к некоторым альтернативным вариантам.

Прежде чем использовать CSS свойство text-orientation, необходимо сначала изучить понятия блочного потока и направления встроенного потока.

Изменение направления текста на вертикальный с помощью css text-orientation
Сменить текст кроссбраузерно поможет css text-orientation (изображение создано с помощью ИИ)

Свойство writing-mode

Оно определяет, имеют ли строки текста горизонтальную или вертикальную ориентацию, и может принимать три значения:

  1. horizontal-tb;
  2. vertical-lr;
  3. 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; 
}

Альтернативные методы CSS text-orientation

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: передает значение свойства от родительского элемента дочернему.

Читайте также: Как сделать глассморфизм с помощью HTML и CSS.

Создание вертикального текста свойством word-wrap

Во-первых, этот вариант позволяет использовать аналогичный подход, что и в случае с применением word-break. Достаточно уменьшить ширину контейнера до 0 пикселей и заставить каждое слово разбиваться на отдельные буквы, которые выстраиваются вертикально. Также потребуется применить свойство white-space для предварительного переноса, чтобы обеспечить наличие пробелов. Во-вторых, это позволит нормально различать слова.

Тег br

Самый примитивный метод достижения вертикальной ориентации текста — использование тегов <br>. Однако этот метод не очень практичен, и его не следует использовать, если строка текста слишком длинная.

Обертывание в тег span

Кроме того, существует ещё один популярный метод — обернуть каждую букву  текста в тег span и с помощью CSS назначить им display: block. Как и использование тега <br>, этот способ не очень удобен для больших текстовых строк.

Использование JavaScript

Вместо двух предыдущих методов лучше использовать JavaScript для динамического добавления оболочки из тегов вокруг каждой буквы вместо того, чтобы делать это вручную. В этом случае текст разбивается на массив, и каждый его элемент оборачивается тегом span.

CSS text-orientation: заключение

Создание вертикального текста несомненно было проблемой в CSS с незапамятных времен. Ни один из возможных способов не мог гарантировать безупречный результат. Однако введение нового свойства text-orientation в CSS полностью решило эту проблему. Несмотря на это, не следует забывать о резервных вариантах для Internet Explorer, чтобы обеспечить максимальную кроссбраузерность.