Правила форматирования текста: линии, вертикаль и фигуры

Иван Корнев·17 августа 2026·⏱3 мин

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

Оглавление

Подчеркивание и декоративные линии

В веб-разработке для управления линиями применяется CSS-свойство text-decoration. Оно позволяет подчеркивать текст, перечеркивать его или проводить линию над ним.

В офисных программах, таких как Microsoft Word, стили подчеркивания настраиваются через диалоговое окно «Шрифт» на вкладке «Главная». Если необходимо создать линии без текста, можно использовать кнопку подчеркивания или специальные символы форматирования.

Графические редакторы вроде Adobe Illustrator предоставляют специальные панели для применения стилей подчеркивания и зачеркивания непосредственно к символам.

Вертикальное расположение текста

В CSS вертикальная ориентация задается свойством writing-mode. Использование значений vertical-lr (слева направо) или vertical-rl (справа налево) определяет направление потока строк и позволяет размещать текст вертикально без использования трансформации поворота.

Вертикальное выравнивание внутри контейнера в вебе регулируется свойством vertical-align, которое работает иначе, чем горизонтальное выравнивание.

В графических пакетах, например в Adobe Illustrator, переключение на вертикальную ориентацию осуществляется через меню «Текст» > «Ориентация текста».

Круговое расположение текста

Наиболее надежным способом размещения текста по кругу в HTML и CSS является использование SVG-элементов <textPath> и <path>. Текст привязывается к заранее нарисованной кривой, при этом элемент <textPath> ссылается на идентификатор пути, определяющего форму окружности или дуги.

Чисто средствами CSS разместить текст вдоль окружности сложно, поэтому SVG остается стандартом для фигурного текста. Альтернативные методы включают использование Canvas с предварительной отрисовкой текста в SVG для повышения качества.

В десктопных векторных редакторах, таких как CorelDRAW, текст размещается вдоль кривой путем наведения инструмента «Текст» непосредственно на контур фигуры.

Частые ошибки

  • Попытка повернуть текст для вертикального отображения в CSS. Вместо использования трансформации поворота следует применять свойство writing-mode, которое корректно задает направление потока строк.
  • Размещение текста вдоль окружности только средствами CSS. Чистый CSS плохо подходит для фигурного текста, поэтому стандартом является использование SVG-элементов <textPath> и <path>.
  • Непонимание работы vertical-align. Это свойство регулирует вертикальное выравнивание внутри контейнера и работает иначе, чем горизонтальное выравнивание блоков.

FAQ

Как сделать линию без текста в Microsoft Word?

Для создания линий без текста можно воспользоваться кнопкой подчеркивания или применить специальные символы форматирования.

Как изменить ориентацию текста в Adobe Illustrator?

Переключение на вертикальную ориентацию осуществляется через меню «Текст» > «Ориентация текста». Для подчеркивания или зачеркивания символов используются соответствующие панели.

Как сверстать текст по дуге в вебе?

Наиболее надежный способ — использование SVG-элементов <textPath> и <path>. Элемент <textPath> ссылается на идентификатор пути, к которому привязывается текст.