Как сделать шрифт сверху вниз

Вертикальное расположение текста – нестандартный, но эффективный способ выделения информации на веб-странице. Чаще всего применяется в дизайне логотипов, боковых панелей, таблиц или акцентных элементов. Основные методы реализации: CSS-свойство writing-mode, трансформации transform: rotate() и Unicode-символы с вертикальной ориентацией. Каждый подход имеет ограничения и оптимальные сценарии использования.

writing-mode: vertical-rl – самый надёжный способ для текста на кириллице и латинице. Поддерживается всеми современными браузерами (Chrome 48+, Firefox 41+, Safari 10.1+, Edge 79+). Пример базовой реализации:

<div style="writing-mode: vertical-rl;">Вертикальный текст</div>

Для японского, китайского или корейского текста используйте writing-mode: vertical-lr. Важно: свойство не работает с inline-элементами – оборачивайте текст в <div> или <span> с display: block/inline-block.

Метод с transform: rotate(90deg) гибче, но требует ручной настройки отступов и выравнивания. Подходит для коротких надписей (например, заголовков в боковых колонках). Пример:

<div style="transform: rotate(90deg); transform-origin: left top; width: fit-content;">Текст</div>

Минусы: сложность выравнивания при динамической ширине контейнера, проблемы с доступностью (скринридеры могут читать текст некорректно). Для улучшения семантики добавляйте aria-label или role="presentation".

Unicode-символы (например, U+FE10–U+FE19 для вертикальных знаков препинания) – узкоспециализированное решение. Работает только с определёнными шрифтами (например, Noto Sans CJK) и не поддерживает произвольный текст. Применяйте для декоративных элементов, где требуется максимальная точность отображения.

При выборе метода учитывайте:

• Тип контента (кириллица/латиница vs. CJK).
• Требования к адаптивности (фиксированная ширина или динамическая).
• Поддержку браузерами (проверяйте на Can I Use).
• Семантику и доступность (тестируйте с VoiceOver/NVDA).

Для сложных макетов комбинируйте writing-mode с flexbox или grid, чтобы избежать наложения элементов.

Вертикальный текст: как сделать шрифт сверху вниз

Вертикальное расположение текста сверху вниз применяется в дизайне логотипов, таблиц, баннеров и восточноазиатских макетах. Основные методы реализации: CSS-свойство writing-mode, трансформации через transform и ручная разметка символов. Каждый подход имеет ограничения по кроссбраузерности и поддержке шрифтов.

Для современных браузеров оптимально использовать writing-mode: vertical-rl (текст идёт справа налево) или vertical-lr (слева направо). Пример:

• .vertical-text { writing-mode: vertical-rl; } – стандарт для японского, китайского текста.
• Поддержка: Chrome 48+, Firefox 41+, Safari 10.1+, Edge 79+.
• Проблемы: не работает с text-align: justify в некоторых браузерах.

Альтернатива для старых браузеров – transform: rotate(90deg) с корректировкой контейнера. Пример:

1. Создайте блок с фиксированной шириной и высотой.
2. Примените transform-origin: left top для правильного позиционирования.
3. Используйте white-space: nowrap, чтобы текст не переносился.

Минусы: требует ручной настройки отступов, ломается при изменении размера шрифта.

Для ручной разметки символов используйте тег <br> после каждого символа или CSS-свойство text-orientation: upright (поддерживается в Chrome 85+, Firefox 80+). Пример:

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

Этот метод сохраняет ориентацию глифов (например, цифры остаются горизонтальными), но не работает с кириллицей в некоторых браузерах.

Тестируйте вертикальный текст на мобильных устройствах: Safari на iOS до версии 13.4 не поддерживает writing-mode. Для кроссбраузерности комбинируйте методы с проверкой через @supports:

@supports (writing-mode: vertical-rl) {
.vertical { writing-mode: vertical-rl; }
}
@supports not (writing-mode: vertical-rl) {
.vertical { transform: rotate(90deg); }
}

Способы отображения вертикального текста в HTML и CSS

Вертикальный текст реализуется через CSS-свойства writing-mode и text-orientation. Основные значения writing-mode: vertical-rl (текст сверху вниз, символы слева направо) и vertical-lr (текст сверху вниз, символы справа налево). Для корректного отображения иероглифов или латиницы используйте text-orientation: mixed (по умолчанию) или upright (символы поворачиваются на 90°). Пример:

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

Для браузерной поддержки учитывайте префиксы и альтернативные методы. Свойство writing-mode поддерживается в Chrome, Firefox, Edge и Safari, но в IE11 требует вендорного префикса -ms-writing-mode. Таблица совместимости:

Для точечной настройки используйте transform: rotate() как запасной вариант. Поворот на 90° против часовой стрелки: transform: rotate(90deg). Учитывайте, что этот метод не меняет направление потока текста, а лишь визуально поворачивает блок. Применяйте к инлайн-блокам или flex-элементам с фиксированной шириной, иначе макет может сломаться. Пример комбинированного подхода:

.fallback-vertical {
display: inline-block;
width: 1em;
transform: rotate(90deg);
transform-origin: left top;
}

Использование свойства writing-mode для поворота текста

Свойство writing-mode в CSS позволяет изменять направление текста без трансформаций, поддерживая вертикальные системы письма. Для поворота текста сверху вниз используйте значение vertical-rl (right-to-left) или vertical-lr (left-to-right), где rl задаёт направление от правого края к левому, а lr – наоборот. Браузеры корректно обрабатывают эти значения в современных версиях: Chrome, Firefox и Edge поддерживают оба варианта с версии 48+, Safari – с 10.1+. Пример базового применения: writing-mode: vertical-rl;.

Для точной настройки ориентации символов добавьте text-orientation: mixed (по умолчанию) или upright – последнее заставляет глифы сохранять вертикальное положение, что критично для кириллицы и латиницы. Без этого свойства буквы могут отображаться боком. Совместите с line-height для контроля межстрочного интервала: в вертикальном режиме он регулирует расстояние между символами по горизонтали. Рекомендуемое значение – 1.5–2 от размера шрифта.

При работе с таблицами или flex-контейнерами учитывайте, что writing-mode влияет на поток дочерних элементов. Например, в display: flex с writing-mode: vertical-rl ось flex-контейнера развернётся на 90 градусов. Для обратной совместимости с IE11 используйте вендорный префикс -ms-writing-mode, но помните: поддержка ограничена, а баги с выравниванием текста неизбежны.

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

text-orientation определяет ориентацию глифов в вертикальном контексте письма, работая только при writing-mode: vertical-rl или vertical-lr. Значение mixed (по умолчанию) поворачивает латинские символы на 90° по часовой стрелке, оставляя иероглифы, хирагану и катакану в естественном вертикальном положении. Для принудительного отображения всех символов в вертикальном виде используйте upright, что полезно для заголовков с короткими фразами на смешанных языках. sideways-right и sideways-left поворачивают текст горизонтально, но сохраняют вертикальное расположение строк – первый вариант подходит для имитации горизонтального текста в вертикальном потоке.

Применяйте text-orientation: upright для логотипов или акцентных элементов, где важна читаемость отдельных символов без поворота. Для длинных абзацев на латинице избегайте upright – это нарушает привычное восприятие текста. В таблицах с вертикальными заголовками комбинируйте writing-mode: vertical-rl с text-orientation: mixed для автоматического выбора оптимальной ориентации в зависимости от языка. Проверяйте поддержку в браузерах: Safari до версии 15.4 не поддерживает sideways-left и sideways-right.

Для точечной настройки используйте text-combine-upright с all или числовыми значениями (например, digits 2), чтобы объединять несколько символов в одну вертикальную ячейку. Это критично для дат, чисел или аббревиатур в вертикальном тексте. Тестируйте макеты на мобильных устройствах – некоторые браузеры могут игнорировать text-orientation при отсутствии явного указания writing-mode.

Вертикальный текст в графических редакторах: Photoshop и Figma

В Photoshop вертикальное расположение текста реализуется через инструмент «Текст» (T). После ввода текста выделите слой и выберите в верхней панели меню: *Текст → Ориентация текста → Вертикальная*. Буквы развернутся на 90°, но останутся горизонтальными относительно друг друга. Для иероглифического стиля (сверху вниз) используйте *Текст → Панели символов → Дополнительные параметры* и активируйте «Вертикальный текст». Photoshop поддерживает кернинг и трекинг для вертикального набора, но не корректирует межстрочный интервал автоматически – его придется настраивать вручную через *Интерлиньяж* в панели символов.

Figma предлагает два способа вертикального текста: стандартный поворот и нативный вертикальный набор. Для поворота выделите текстовый слой и в панели свойств задайте угол 90° или -90° в разделе *Rotation*. Для нативного вертикального текста (как в японских или китайских макетах) выберите текстовый инструмент, введите текст, затем в панели справа переключите *Text direction* на *Vertical*. Figma автоматически адаптирует межстрочный интервал, но для точной настройки используйте параметр *Line height* в пикселях или процентах.

В Photoshop при вертикальном наборе шрифты с кириллицей или латиницей могут отображаться некорректно – буквы «падают» на бок. Решение: используйте шрифты с поддержкой вертикального набора (например, *Noto Sans CJK*, *Source Han Sans*) или конвертируйте текст в кривые (*Текст → Конвертировать в кривые*), но это лишит возможности редактирования. Альтернатива – разделить текст на отдельные символы и вращать каждый вручную через *Редактирование → Трансформирование → Поворот*.

Figma сохраняет редактируемость вертикального текста даже после применения эффектов. Для выравнивания используйте *Text align* (по левому/правому краю или по центру) и *Auto width/height* для динамического изменения размеров фрейма. При экспорте в SVG вертикальный текст остается векторным, но в PDF может конвертироваться в кривые – проверяйте настройки экспорта (*File → Export → PDF*).

В Photoshop для имитации традиционного вертикального письма (например, для плакатов в стиле ретро) создайте текстовый слой, примените вертикальную ориентацию, затем в *Панели символов* уменьшите *Трекинг* до -50 или -100, чтобы буквы «прижались» друг к другу. Для точного позиционирования используйте направляющие и привязку к сетке (*Просмотр → Показать → Сетка*). Не забывайте про *Anti-aliasing* (в настройках текстового слоя) – для вертикального текста оптимален режим *Sharp* или *Crisp*.

Figma позволяет создавать вертикальные текстовые блоки с автопереносом. Для этого выделите текстовый слой, в панели свойств включите *Auto height* и задайте фиксированную ширину фрейма. Текст будет переноситься по словам, сохраняя вертикальное направление. Для многострочного вертикального текста используйте *Shift+Enter* для ручного переноса строк. При работе с компонентами вертикальный текст наследует стили, но направление придется настраивать вручную для каждого экземпляра.

В Photoshop при печати вертикального текста проверяйте параметры *Цветоделения* (*Файл → Экспорт → Цветоделение*). Некоторые RIP-системы игнорируют вертикальную ориентацию, конвертируя текст в горизонтальный. Решение: экспортируйте макет в PDF с настройками *PDF/X-4* и включенной опцией *Сохранять редактируемый текст*. Для веб-графики используйте формат PNG-24 с прозрачностью – вертикальный текст сохранит четкость при масштабировании.

Figma интегрирует вертикальный текст в автослои и компоненты. Для создания динамических вертикальных заголовков используйте *Auto layout* с направлением *Vertical* и выравниванием *Space between*. При этом текстовые слои можно связывать с переменными (например, для локализации) – направление останется неизменным. Для анимации вертикального текста применяйте *Smart Animate* с изменением свойств *Rotation* или *Text direction*, но избегайте резких переходов – Figma может сбрасывать выравнивание.

Вопрос-ответ: