CSS — вертикальный текст: установка его вертикальной ориентации с помощью свойства writing-mode языка

CSS предоставляет гибкие возможности для форматирования текста на веб-страницах. Одна из таких возможностей - установка вертикальной ориентации текстовых блоков. Это позволяет создавать нестандартные и креативные макеты.

Основы вертикального текста в CSS

Для расположения текста по вертикали в CSS используется понятие режимов письма . Существует два основных режима:

• Горизонтальный (слева направо)
• Вертикальный (сверху вниз)

Переключение между режимами осуществляется с помощью свойства writing-mode. Оно определяет направление отображения текстовых блоков на странице.

Основные значения writing-mode:

Помимо направления текста, writing-mode также влияет на отображение блочных и строчных элементов. При вертикальной ориентации блоки становятся строками, а строки - блоками.

Для удобства работы с вертикальным текстом в CSS есть логические свойства вместо стандартных физических (top/bottom, left/right). Например, свойства inline-start, block-start соответствуют началу строки и блока в текущем режиме письма.

Варианты вертикального текста в CSS

Рассмотрим основные способы сделать текст вертикальным с помощью CSS.

Классический вертикальный текст

Самый простой и правильный способ - использовать уже упомянутое выше свойство writing-mode со значением vertical-rl:

.vertical-text { writing-mode: vertical-rl; }

При этом текст автоматически меняет ориентацию. Для лучшего отображения можно добавить пару дополнительных свойств:

.vertical-text { writing-mode: vertical-rl; text-orientation: upright; text-combine-upright: none; }

Такой способ поддерживается всеми современными браузерами и является рекомендуемым для вертикального текста.

Поворот текста transform

Другой популярный вариант - использование свойства transform:

.vertical-text { transform: rotate(-90deg); }

Это просто поворачивает весь элемент с текстом на 90 градусов против часовой стрелки. В отличие от writing-mode, ориентация символов при этом не меняется.

В целом такой способ тоже работает, но является менее предпочтительным решением.

Кроме классических вариантов, вертикальный текст можно реализовать в таблицах, колонтитулах, с помощью дополнительных оберток и т.д. Это открывает простор для креатива.

Например, оригинальный вариант - сделать вертикальным только последние буквы в слове. Или поместить вертикальный текст внутрь анимированного баннера.

Выравнивание вертикального текста

После установки вертикальной ориентации текстовый блок ведет себя не совсем привычно при выравнивании. Рассмотрим основные методы.

Выравнивание по горизонтали

Теперь для выравнивания по горизонтали нужно использовать свойства vertical-align или align-self вместо привычных margin/padding слева/справа.

Выравнивание по вертикали

А вот для вертикального выравнивания отлично подходит flexbox:

.parent { display: flex; align-items: center; }

Также можно использовать абсолютное позиционирование с translate:

.vertical-text { position: absolute; top: 50%; transform: translateY(-50%); }

Центрирование вертикального текстового блока

Для центрирования вертикального текста по горизонтали и вертикали одновременно можно задать auto отступы и размеры:

.vertical-text { writing-mode: vertical-rl; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: auto; width: auto; margin: auto; }

Такая конструкция сработает во всех браузерах.

Как видите, возможности для экспериментов с вертикальным текстом в CSS довольно обширны. Это текст вертикально по центру css открывает новые горизонты для веб-дизайнеров и разработчиков.

Применение на практике

Давайте рассмотрим несколько практических примеров использования вертикального текста в веб-дизайне.

Вертикальное меню навигации

Одно из распространенных применений - вертикальное меню. Оно экономит горизонтальное пространство и выделяется на фоне традиционных горизонтальных меню.

nav { writing-mode: vertical-rl; } nav ul { display: flex; flex-direction: column; }

Такое меню удобно разместить с левой стороны, оставив правую часть под основной контент.

Боковая панель с контентом

Вертикальный текст отлично подойдет для узкой боковой панели с дополнительным контентом:

.sidebar { writing-mode: vertical-rl; width: 20%; height: 100vh; position: fixed; }

Это могут быть ссылки на популярные материалы, комментарии пользователей, теги - любой пользовательский контент.

Анимированные заголовки

Используя анимации и трансформации, можно сделать захватывающий анимированный заголовок с вертикальным текстом:

.title { writing-mode: vertical-rl; animation: move 5s ease infinite; } @keyframes move { 0% {transform: translateX(0);} 100% {transform: translateX(100px);} }

Эффектно смотрится на hero-баннерах и страницах-призывов.

Вертикальный текст в баннерах

И наконец, вертикальный текст отлично впишется в креативные веб-баннеры. Например:

.banner__text { writing-mode: vertical-rl; letter-spacing: 5px; text-transform: uppercase; }

Это придаст баннеру футуристичный и необычный вид. Такой баннер запомнится пользователям.

Как видите, с помощью вертикального текста можно реализовать множество креативных решений для своего сайта или проекта. Экспериментируйте и удивляйте посетителей!