Вертикальная ориентация текста применяется в интерфейсах, где требуется компактное размещение информации: боковые меню, таблицы с узкими колонками, диаграммы или элементы инфографики. В CSS реализовать такую задачу можно несколькими способами, каждый из которых имеет различное влияние на читаемость и совместимость с браузерами.
Наиболее точный способ управления направлением текста – использование свойства writing-mode. Значения vertical-rl и vertical-lr позволяют изменять направление потока текста справа налево или слева направо, что удобно при работе с восточноазиатскими языками или декоративными подписями. В отличие от устаревших решений через трансформации, этот метод обеспечивает корректный перенос строк и поддержку юникод-символов.
Альтернативой может быть применение transform: rotate(). Такой подход больше подходит для коротких подписей, например, для заголовков таблиц или маркировки осей графиков. Однако при длинных фрагментах текста возникают сложности с выравниванием и переносами, что делает этот вариант менее универсальным.
Выбор метода зависит от задач: если нужно корректное отображение больших блоков текста, следует использовать writing-mode; если требуется декоративный эффект на отдельных элементах, достаточно transform. Важно учитывать поддержку свойств в целевых браузерах и тестировать результат на разных устройствах.
Использование свойства writing-mode
Свойство writing-mode управляет направлением строк текста и расположением блоков. Основные значения: horizontal-tb (по умолчанию, горизонтально слева направо), vertical-rl (вертикально сверху вниз, столбцы справа налево), vertical-lr (вертикально сверху вниз, столбцы слева направо).
Для вертикального отображения текста чаще всего применяют writing-mode: vertical-rl;. Этот вариант используется, например, для боковых заголовков или оформления азиатских языков. При необходимости зеркального варианта удобно использовать vertical-lr.
Свойство влияет не только на текст, но и на блочные элементы: направление потока содержимого меняется в соответствии с выбранным режимом. Это позволяет строить полноценные вертикальные макеты без трансформаций.
Рекомендуется использовать writing-mode совместно с text-orientation. Например, text-orientation: upright; сохраняет читаемость латиницы и цифр в вертикальном тексте.
Поддержка в современных браузерах стабильна, включая Chrome, Firefox, Safari и Edge. Для старых версий IE применялось префиксное значение -ms-writing-mode, что актуально только при поддержке устаревших систем.
Применение text-orientation для управления направлением букв
Свойство text-orientation используется вместе с writing-mode и определяет ориентацию глифов в вертикальном тексте. Оно влияет не на расположение строк, а на то, как именно отображаются символы внутри строки.
Ключевые значения:
mixed– латиница и цифры отображаются горизонтально, иероглифы остаются вертикальными;upright– все символы поворачиваются в вертикальное положение, независимо от их алфавита;sideways– все символы располагаются боком, сохраняя горизонтальную ориентацию;sideways-right– аналогичноsideways, но с фиксированным направлением вправо.
Практический пример:
p {
writing-mode: vertical-rl;
text-orientation: upright;
}
Для вертикальной типографики на языках с кириллицей и латиницей рекомендуется upright, чтобы избежать переворота букв на бок. При работе с числовыми значениями удобно использовать mixed, так как цифры в таблицах и диаграммах остаются читаемыми в горизонтальном виде.
Поддержка в современных браузерах полная, включая Chrome, Firefox, Safari и Edge. В Internet Explorer свойство не реализовано, поэтому для кросс-браузерности можно комбинировать его с трансформациями transform: rotate(), применяя условные стили.
Совмещение вертикального текста с горизонтальными блоками
При размещении вертикальных надписей рядом с горизонтальными элементами важно учитывать выравнивание и поведение контейнеров. Свойство writing-mode: vertical-rl или vertical-lr позволяет задать направление текста, но для корректного сочетания с горизонтальными блоками требуется дополнительная настройка.
Используйте display: flex для родительского контейнера: вертикальный блок можно задать как один из элементов, а горизонтальные разместить рядом. Например, align-items: center обеспечивает совпадение базовой линии вертикального текста с серединой горизонтальных карточек или колонок.
Если требуется строгое прилегание, добавляйте margin только на стороне, противоположной направлению текста, иначе текстовый блок будет «толкать» соседние элементы. Для управления расстоянием между буквами применяйте text-orientation: mixed, чтобы цифры и латиница оставались читаемыми в вертикальном положении.
В макетах с заголовком сбоку и основным текстом справа полезно использовать grid-template-columns, где первый столбец фиксирован под вертикальный текст, а второй занимает оставшееся пространство. Это гарантирует стабильность при изменении размеров окна.
Комбинируя flex и grid, можно формировать сложные схемы: вертикальный текст в узкой колонке и несколько горизонтальных блоков в адаптивной сетке, сохраняя визуальный баланс и удобочитаемость.
Вертикальное расположение текста внутри таблиц
Для разворота текста в ячейках таблицы применяют свойство writing-mode и, при необходимости, transform. Это особенно удобно при отображении заголовков колонок с ограниченной шириной.
| Артикул | Категория | Цена | Количество |
|---|---|---|---|
| 001-A | Одежда | 1200 ₽ | 50 |
| 002-B | Обувь | 2400 ₽ | 30 |
Для чтения сверху вниз используют writing-mode: vertical-rl без вращения. Если требуется направление снизу вверх, добавляется transform: rotate(180deg). Такой подход работает во всех современных браузерах и позволяет экономить горизонтальное пространство.
Стилизация заголовков и меню с вертикальным текстом
Для заголовков удобно использовать свойство writing-mode: vertical-rl в сочетании с text-orientation: upright, чтобы буквы не переворачивались. Такой прием хорошо работает в боковых панелях или узких блоках, где горизонтальное размещение текста занимает слишком много места.
При создании вертикального меню важно контролировать читаемость: межбуквенный интервал задается через letter-spacing, а дополнительное выравнивание достигается свойством text-align в контейнере. Для уменьшения визуальной плотности меню можно применять padding сверху и снизу, чтобы элементы не слипались.
Гармония с макетом достигается за счет выбора правильного шрифта: узкие гарнитуры в вертикальной ориентации воспринимаются лучше. Если нужно выделить активный пункт меню, используют border-left или background-color с плавным переходом через transition. Для заголовков уместно добавлять декоративные линии с помощью ::before или ::after, располагая их параллельно направлению текста.
Следует учитывать особенности браузеров: в Safari и старых версиях Edge свойство text-orientation может работать некорректно. В таких случаях применяют поворот контейнера через transform: rotate(90deg), но этот метод требует дополнительной настройки выравнивания и часто используется как резервный.
Создание вертикальных подписей к осям графиков
Вертикальные подписи к осям графиков повышают читаемость данных при ограниченном пространстве по горизонтали. Для реализации используются CSS-свойства writing-mode и transform.
Прямой способ – применение writing-mode: vertical-rl;, который поворачивает текст на 90° по часовой стрелке:
- Добавьте элемент
<span>или<div>с текстом подписи. - Присвойте стиль:
writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap;. - Для выравнивания подписи по центру оси используйте
display: flex; justify-content: center;у контейнера оси.
Если требуется поворот на 270° (текст читается снизу вверх), применяют трансформацию:
transform: rotate(-90deg);- Установите
transform-origin: left top;для контроля точки вращения. - Подпись должна быть
display: inline-block;, чтобы вращение корректно применялось.
Для точного позиционирования вдоль оси:
- Используйте
marginилиpaddingдля смещения подписи относительно делений графика. - Применяйте
line-heightдля равномерного распределения текста по вертикали. - Если подпись длинная, ограничьте ширину контейнера с помощью
max-heightиoverflow: hidden;.
Практическая рекомендация: вертикальные подписи лучше применять для коротких названий или единиц измерения. Для длинных названий целесообразно использовать перенос строк с word-break: break-word;.
Пример CSS для вертикальной подписи к оси Y:
.y-axis-label {
writing-mode: vertical-rl;
text-orientation: mixed;
white-space: nowrap;
display: inline-block;
text-align: center;
line-height: 1.2;
margin-left: 10px;
}
Проблемы совместимости writing-mode в разных браузерах
Свойство writing-mode поддерживается в современных версиях Chrome, Firefox, Edge и Safari, однако есть отличия в интерпретации вертикальных режимов. В Firefox до версии 41 наблюдалось некорректное отображение vertical-rl, текст частично накладывался на соседние элементы.
Internet Explorer поддерживает writing-mode через устаревшие значения tb-rl и tb-lr, что требует условных комментариев или использования префикса -ms-writing-mode. В IE 11 и старше вертикальный текст может смещаться при применении line-height и padding, нарушая выравнивание.
Safari на iOS и macOS корректно отображает vertical-rl и vertical-lr, но не учитывает text-orientation: mixed для кириллицы, что приводит к наклонному размещению символов. Рекомендуется применять text-orientation: upright для русских букв.
Chrome и Edge на движке Chromium корректно рендерят вертикальный текст, однако при использовании flex-контейнеров необходимо дополнительно задавать min-width и min-height, иначе элементы могут перекрываться.
Для кроссбраузерной совместимости рекомендуется: использовать префиксы -webkit- и -ms- для старых версий Safari и IE, проверять text-orientation для кириллицы и задавать фиксированные размеры контейнеров при вертикальном тексте.
Вопрос-ответ:
Какие свойства CSS позволяют повернуть текст вертикально?
Для вертикального отображения текста обычно используют свойство writing-mode. Значения vertical-rl и vertical-lr размещают текст вертикально, при этом направление букв идёт сверху вниз или снизу вверх соответственно. Дополнительно можно использовать text-orientation для управления ориентацией символов, например upright для правильного отображения букв.
Можно ли сделать вертикальный текст с помощью свойства transform?
Да, поворот текста на 90 или 270 градусов возможен через transform: rotate(90deg) или rotate(270deg). Этот метод подходит для отдельных элементов, однако он не меняет направление текста как writing-mode, а просто поворачивает контейнер. Нужно учитывать, что при таком подходе может потребоваться корректировка ширины и высоты блока, чтобы текст не выходил за границы.
Как вертикальный текст влияет на перенос строк и выравнивание?
При использовании writing-mode строки располагаются вертикально, и браузер автоматически выполняет перенос при достижении границ блока. Свойства text-align и line-height работают иначе: выравнивание может быть по началу или концу блока, а расстояние между строками задаётся вертикально. Для точной настройки иногда используют padding и margin, чтобы добиться нужного визуального эффекта.
Есть ли ограничения совместимости браузеров для вертикального текста в CSS?
Поддержка writing-mode в современных браузерах высокая, включая Chrome, Firefox, Edge и Safari. Некоторые старые версии Internet Explorer используют префикс -ms-writing-mode. Свойство text-orientation поддерживается не во всех браузерах одинаково: в некоторых может потребоваться дополнительно применять transform для корректного отображения. Поэтому при проектировании вертикального текста желательно проверять его во всех целевых браузерах.
Загрузка...
