Как повернуть текст в html

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

Текст сверху вниз с поворотом символов по часовой стрелке

  
Пример

Образец применения: описание слева от картинки.

Текст снизу вверх с поворотом символов против часовой стрелке

  
Пример

Вертикальные заголовки HTML-таблицы

    Показатель  ЯнварьФевральМарт
 
▶ Посмотреть весь код
  Апрель  Май  Июнь  Июль  Август  Сентябрь  Октябрь  Ноябрь  Декабрь Год  Абсолютный максимум, °C 5,2 6,8 16,5 31,1 32,6 39,5 43,9 40,4 34,0 26,0 14,7 8,2 43,9 Средняя температура, °C −9,9 −9,6 −3,4 7,0 16,9 19,7 23,5 19,4 13,4 6,0 −2,4 −8,2 5,7 Абсолютный минимум, °C −43 −36,9 −31,4 −20,9 −4,9 −0,4 8,1 3,5 −3,4 −15,7 −28,1 −41,3 −43,3
Климат Самары
     
 

writing-mode

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

Вторая строка

  
Первая строка  
Вторая строка 
  Ячейка 1_1 Ячейка 1_2 Ячейка 2_1 Ячейка 2_2 
 sideways-rl и sideways-lr без реализации в Google Chrome уже более 7 лет. -->

Важно: специально для writing-mode были разработаны такие свойства, как inline-size , block-size , padding-inline-start , margin-block-start , border-block-end и т. п.

Текст сверху вниз без разворота символов

  
Пример

text-orientation

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

Вторая строка

  
Первая строка  
Вторая строка 
  Ячейка 1_1 Ячейка 1_2 Ячейка 2_1 Ячейка 2_2 

Объединить несколько символов в пространстве одного символа

Вот пример 10

  
Вотпример10

Вот пример 10

  
Вотпример10

text-combine-upright

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

Вторая строка

  
Первая строка  
Вторая строка 
  Ячейка 1_1 Ячейка 1_2 Ячейка 2_1 Ячейка 2_2 

• Выравнивание элемента по высоте
• Выравнивание текста по вертикали
• Направление flex-элементов

Создаём повёрнутый текст с CSS свойством “writing-mode”

В этой статье я покажу вам, как расположить текст на веб-странице сверху вниз, вместо слева-направо (или справа-налево). Есть два способа, один лучше другого, так что погнали!

Как использовать CSS правило “writing-mode”

Способ №1: преобразования в CSS

Если вы знакомы с CSS, то можете подумать, что transform — это лучший способ решения этого вопроса, но позвольте мне показать вам, почему он не идеален. Начнём с некоего содержимого (заголовки и параграф), затем применим transform , вместе с transform-origin , таким образом оно повернётся относительно правильной точки, затем отступ, чтобы оно не выходило за пределы экрана.

Такой подход работает для поворота текста, но не воздействует на положение в документе, поэтому у нас h2 , залез на содержимое под ним. Хотя, у нас получился прикольный абстрактный результат.

Способ №2: CSS writing-mode

Второй способ, поддерживает положение в документе, таким образом h2 останется истинных размеров, независимо от направления текста. Мы будем использовать свойство write-mode, например:

writing-mode: vertical-rl; 

В этом случае, мы задаём значение vertical-rl , что придаёт направление отображения на вертикальное и направление текста справа-налево.

Так намного лучше. Ещё вы заметите, что курсор тоже изменится, чего не было при использовании преобразований CSS transform.

Block Flow Direction (направление положения блока)

Вы, наверно, заметили, что мы использовали значение rl (справа-налево), хотя мы привыкли читать слева-направо. А это потому, что мы изменили направление положения блока (Block Flow Direction). Если мы зададим h2 значение высоты, вы увидите, что текст сгруппируется и вы поймёте, что в данном случае, действительно нужно, чтобы строки располагались от правой стороны страницы к левой:

Это подводит нас к тому, что нам необходимо определить какие из этих выравниваний и в каких направлениях должны пойти. Написанное латинскими буквами пойдёт от верха к низу (это и есть Block Flow Direction). Текст читается слева-направо (и это Inline Flow Direction). И базовая линия выравнивания символов по нижнему краю, хотя направлена наверх (это Character Direction). Вот так:

Другие написания, вроде арабскиого, на основе Хан (на китайском и японском) или монгольское, могут отображать текст, используя эти три положения в любой комбинации направлений.

Написания и режим письма (Writing Mode)

Режим письма разработан для поддержки всех в мире вариантов написания и систем письма. Мы упомянули монгольскую систему, например, все они отображаются вертикально, но располагаются слева-направо.

Другие варианты writing-mode, которые вы можете использовать уже сегодня, включают:

• vertical-lr — когда, текст располагается вертикально, но идёт слева контейнера направо.
• horizontal-tb — когда текст остаётся горизонтальным, но располагается сверху вниз. Это (вы заметили) направление по умолчанию.

Направление текста

Вот ещё на что стоит взглянуть: китайская поэма, использован режим vertical-rl . Содержимое направлено справа, так что вы начинаете читать с права страницы и читаете в левом направлении. Но, что вы ещё, должно быть, заметили — символы всё-таки направлены наверх. Латинские символы с теми же правилами, были бы направлены по-другому. Это сделано специально:

«Стандарт Unicode присваивает свойство каждому символу, и браузеры могут использовать его для определения ориентации по умолчанию для данного символа». — W3C

Дальше вы можете подгонять ориентацию символов, используя свойство text-orientation .

Вывод

На момент написания, браузеры отлично поддерживают режим написания CSS, хотя он всё ещё в разработке. Всё, что вы видели я делал в этом уроке, уже можно использовать для рабочего сайта.

Не важно, используете ли вы это в практических или эстетических целях, давайте посмотрим на то, как вы это используете в комментариях!

Полезные ссылки

• Styling vertical Chinese, Japanese, Korean and Mongolian text
• writing-mode на MDN

Как повернуть текст на 90 градусов в таблице?

Ребят, подскажите, как сделать чтобы в определённой ячейки таблицы текст
отображался не слева на права, а снизу вверх, как бы повёрнутый на 90 градусов?
P. S.
имеется в виду не перенос каждой буквы на новую строчку, а именно поворот строго вертикально.

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как в редакторе Dia повернуть текст на 90 градусов
Как в этом редакторе повернуть текст на 90, кто знает подскажите.

Как в LibreOffice Draw повернуть текст в таблице?
Здравствуйте, подскажите пожалуйста как в LibreOffice Draw повернуть текст в таблице?

[C++ Builder XE] TcxSpreadSheetBook. Повернуть текст в ячейке на 90 градусов.
Здравствуйте! Подскажите возможно ли повернуть текст в ячейке компонента TcxSpreadSheetBook на.

Вывести текст на канву вертикально (повернуть на 90 градусов)
Я рисую на канве в delphi, мне необходимо вывести текст вертикально (повернуть на 90 градусов), как.

П овёрнутый текст

Некоторое время назад я уже делился этим решением в соцсетях, но на этот раз хочу написать о нём немного подробнее.

Задача: получить повёрнутый на 90 градусов текст.

Проблема: широко известно, что при использовании transform , блок ведёт себя аналогично сдвигу через position:relative — продолжает занимать место в потоке по состоянию до трансформации, так что, по факту, изменение происходит только визуальное.

Однако, довольно часто можно захотеть повернуть блок так, чтобы этот поворот влиял и на поток. Например, если мы захотим выстроить несколько вертикальных блоков в ряд, подобно книгам на полке, или если мы захотим использовать повёрнутый текст в качестве заголовков таблицы — в этих случаях нам нужно будет гарантировать, что высота станет равна ширине блока, в то время как ширина — высоте.

У меня получилось решить эту задачу с одним допущением: нужно знать высоту поворачиваемого элемента. В этом случае реализация становится очень простой:

Нам понадобится дополнительный элемент. HTML каждого блока будет примерно таким:

.rotated-text

.rotated-text__inner

.rotated-text__inner:after

В итоге мы получаем квадратный элемент, обрезаемый враппером до ширины своей прошлой высоты, такой элемент можно использовать в любом контексте, для него будут работать разные свойства вроде text-align или vertical-align , так что можно сказать, мы получили «честный» повёрнутый блок.

Ну и несколько живых примеров:

З аголовки таблиц

Очевидный пример — компактные по ширине заголовки таблиц.

First th	Some cell	And another
Second th	12	12314
Third th	12	12314

First th	The Second th	Third th
2	4	42
12	4	234
13	100	0

«Книжная полка»

Так как повёрнутые блоки получаются «честными», то, если выстроить их в ряд, высота ряда будет равна высоте самого большего из них:

• The Idiot
• The Little Prince
• Roadside Picnic
• Flowers for Algernon
• A Book of Five Rings
• The Glass Bead Game
• The Hitchhiker’s Guide to the Galaxy
• The Hobbit
• One Flew Over the Cuckoo’s Nest
• 1984
• Mother Night
• Speaker for the Dead
• The Day of the Triffids

Ещё раз: мы должны знать высоту блока, так что, если понадобится поворачивать таким образом многострочные блоки, нужно будет соответствующим образом изменять ширину их врапперов.

Кроме того, возможно, этот метод можно заставить работать и в IE — применив матричный фильтр для поворота и добавив элемент в замену псевдоэлементу. Мне лень всё это делать, но вы можете всегда попробовать это сделать сами 🙂