Как повернуть текст на 90 градусов в CSS кросс-браузерно?

Быстрый ответ

Для задания вертикальной ориентации текста, применимой в большинстве браузеров, используется свойство CSS writing-mode. Данное свойство при значении writing-mode: vertical-lr; обеспечивает отображение текста в вертикальном направлении. Приведён ниже простой пример его использования:

.vertical-text {
  writing-mode: vertical-lr; /* Прощай, горизонтальное однообразие! */
}

После этого добавьте класс в ваш HTML-тег:

<div class="vertical-text">Вертикальный текст</div>

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

Расширяем возможности свойства writing-mode

Свойство writing-mode безусловно полезно для изменения направления текста, однако иногда возникает необходимость повернуть текст на определённый угол, чтобы добиться интересного визуального эффекта. Тогда можно использовать следующий код:

.vertical-text-rotated {
  transform: rotate(90deg); /* Поворачиваем текст на 90 градусов! */
  transform-origin: center;
}

Чтобы сохранить совместимость со старыми версиями Internet Explorer (да, их тоже стоит учесть):

.vertical-text-rotated {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* Помогаем повернуться старому другу IE! */
}

Используйте caniuse.com для проверки поддержки свойств и не забывайте про вендорные префиксы:

.vertical-text-rotated {
  -webkit-transform: rotate(90deg); /* Привет, WebKit! */
  -moz-transform: rotate(90deg); /* Вперёд, Mozilla! */
  -ms-transform: rotate(90deg); /* Не забываем о старом верном Microsoft */
  -o-transform: rotate(90deg); /* И Opera тоже в деле */
  transform: rotate(90deg); /* Для новаторов мира браузеров */
}

Точность и совместимость

Настройка позиционирования текста

Если вам нужно повернуть только одно слово или букву, хорошим решением будет использование строчных элементов:

<p>Несколько <span class="rotated">вертикальных</span> слов.</p>

.rotated {
  display: inline-block;
  transform: rotate(90deg); /* Небольшие изюзминки добавляют тексту фишечки! */
}

Подробнее об этом расскажет наш спикер на видео

SVG для детального позиционирования

Если требуется высокая точность оформления, то подойдёт SVG для размещения текста:

<svg width="100" height="300">
  <text x="10" y="80" transform="rotate(90 10 80)">Наш надёжный вертикальный союзник</text>
</svg>

SVG позволяет применять атрибуты text-anchor и alignment-baseline для точного выравнивания и поворота текста.

Старые версии IE требуют особого внимания

Даже Internet Explorer версий 6-8 заслуживает нашего внимания. Для этих версий браузера условные комментарии и свойство filter могут служить решением проблем с совместимостью:

<!--[if lt IE 9]>
<style>
.vertical-text-ie {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
</style>
<![endif]-->

Визуализация

Представьте вертикальный текст как лестницу, которая ведёт вас вверх по странице:

Горизонтальный текст:   Чтение идёт -> 👉
------------------------------
Вертикальный текст:     🧗
                        Т
                        е
                        к
                        с
                        т
                        |
                      Вверх мы идём!

С помощью CSS мы меняем привычное восприятие и переворачиваем представление:

.vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

В итоге вертикальный текст поднимается вверх, бросая вызов всем правилам, аналогично тому, как наши стили CSS сопротивляются стандартной горизонтальной разметке. 🔄🆙

Продвинутые приёмы поворота текста

Применение writing-mode для ортогонального управления потоком макета

Переключение между writing-mode: vertical-lr; и writing-mode: vertical-rl; служит для создания ортогональных потоков. В сочетании с text-orientation: upright; это обеспечивает сохранение вертикального положения символов.

Позиционирование после поворота

После поворота текста может потребоваться корректировки. Для этого можно применить абсолютное позиционирование или flexbox для правильного вспомогательного расположения элементов:

.absolute-positioned-text {
  position: absolute; /* Поднимаемся на новый уровень с абсолютно позиционированным текстом! */
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%) rotate(90deg);
}

Особенности дизайна для мобильных устройств

Не стоит забывать о мобильных пользователях! Разные способы ввода и ориентации экрана требуют адаптивного дизайна. Flexbox и grid идеально подходят для создания гибких макетов с вертикальным текстом.

Полезные материалы

1. CSS writing modes – MDN Web Docs — подробный гайд по режимам письма в CSS, включая вертикальные текстовые блоки.
2. Can I use... Support tables for HTML5, CSS3, etc — проверка совместимости браузеров для свойства writing-mode в CSS.
3. CSS transform property – w3schools.com — определения и особенности свойства CSS transform, незаменимого при работе с вертикальным текстом.
4. Transform | CSS-Tricks — глубокий анализ свойства CSS transform с практическими примерами его применения.
5. CSS Writing Modes Level 3 – W3C — ознакомление с официальной спецификацией W3C по режимам письма в CSS, содержащей всесторонние сведения о вертикальном тексте.
6. Examples of vertical text – CodePen — огромное количество живых примеров на CodePen, демонстрирующих различные способы использования вертикального текста в CSS.