Как сделать вертикальный текст в 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-элементов

writing-mode

Устанавливает направление текста на странице. Свойство writing-mode является универсальным и позволяет одновременно задавать значения свойств direction и block-progression .

Синтаксис

writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr

Значения

lr-tb Устанавливает направление текста слева направо. rl-tb Задает направление текста справа налево. tb-rl Текст располагается вертикально и выравнивается по верхнему и правому краю. bt-rl Текст располагается вертикально и выравнивается по нижнему и правому краю. tb-lr Текст располагается вертикально и выравнивается по верхнему и левому краю. bt-lr Текст располагается вертикально и выравнивается по нижнему и левому краю.

Влияние разных значений на положение текста в таблице показано на рис. 1.

Рис. 1. Положение текста при разных значениях writing-mode

В табл. 1 показаны значения свойств direction и block-progress , соответствующие значениям writing-mode , а также языки, где они

Табл. 1. Значения writing-mode

writing-mode	direction	block-progress	Для каких языков
lr-tb	ltr	tb	Романских, греческого, кириллических
rl-tb	rtl	tb	Арабского, еврейских языков
tb-rl	ltr	rl	Азиатских в вертикальном написании
bt-rl	ltr	rl	Арабского, вставленного в азиатский документ
tb-lr	ltr	rl	Монгольского
bt-lr	rtl	rl	Арабского, вставленного в монгольский документ

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

     table < border-collapse: collapse; height: 350px; width: 300px; >table td  
 
Текст
 
Текст
 
Текст
 
Текст
 
Текст
 
Текст
 
 
lr-tb
 
rl-tb
 
tb-rl
 
bt-rl
 
tb-lr
 
bt-lr
 
 
  

Браузеры

Internet Explorer 6.0 поддерживает только значения lr-tb и tb-rl , Internet Explorer 7.0 поддерживает значения lr-tb , rl-tb , tb-rl , bt-rl .

Вертикальный текст на CSS

Какие в принципе существуют варианты, чтобы расположить текст вертикально на чистом CSS. Я, как минимум знаю два варианта, оба мы сейчас и рассмотрим.

HTML разметка

HTML разметка универсальна и подходит для любого варианта.

CSS

Vertical

Text

Typography

CSS свойство writing-mode (способ первый)

Поставим текст в центре экрана и поместим его в контейнер.

@import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap’);
* margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, sans-serif;
>
section display: flex; / * подключение flexbox * /
justify-content: center; / * горизонтальное центрирование * /
align-items: center; / * вертикальное центрирование * /
min-height: 100vh; / * на всю высоту экрана * /
background: #827717; / * цвет фона * /
>
.container text-align: center; / * центрирование содержимого контейнера * /
background: #FDD835;
>

Подготовим бокс с белым фоном для вертикального текста.

.box display: flex;
justify-content: center;
align-items: center;
background: #fff;
padding: 0 20px; / * поля для текста * /
>

Свойство writing-mode задает направление текста. Свойство text-orientation определяет ориентацию символов в строке. Оба свойства поддерживаются всеми современными браузерами, за исключением IE, который уже и сам не поддерживается Microsoft-ом.

h2 font-size: 5em; / * размер текста * /
line-height: 1.2em; / * выравнивание текста * /
font-weight: 700; / * жирность текста * /
color: #827717; / * цвет текста * /
writing-mode: vertical-lr; / * текст установлен слева направо * /
text-orientation: upright; / * символы стоят друг под другом * /
>
h3 font-size: 3.2em;
text-transform: uppercase; / * заглавные буквы * /
padding-top: 20px; / * отступ сверху * /
background: #880E4F; / * цвет фона * /
font-weight: 300;
letter-spacing: 0.3em; / * расстояние между буквами * /
color: #fff;
writing-mode: vertical-rl; / * ориентация символов * /
>
h4 font-size: 2.2em;
line-height: 2em;
color: #827717;
text-transform: uppercase;
writing-mode: vertical-lr;
text-orientation: upright; / * текст установлен слева направо * /
>
.container h5 margin: 10px 0;
font-weight: 500;
color: #000000;
text-transform: uppercase;
letter-spacing: 0.35em;
font-size: 1.5em;
padding-left: 10px;
>

CSS-свойство transform (способ второй)

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

Посмотрите пример на CodePen

Желательно всем людям, независимо от их профессии уметь программировать на Python. Переходите по ссылке и вы узнаете почему я так думаю, видеокурс «Программирование на Python с Нуля до Гуру»

Создано 25.08.2021 10:25:30

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Как сделать вертикальный текст с помощью css text-orientation

Свойство CSS text-orientation позволяет располагать текст вертикально, поворачивая строку на 90° по часовой стрелке. Чаще всего подобное используется для контента на азиатских языках, где написание осуществляется сверху вниз.

CSS text-orientation: параметры и особенности

Во многом это аналогично тому, как text-comb-upright разворачивает группы символов в строке в вертикальном направлении. Но он применяется для текстовых строк целиком.

Для создания двунаправленного текста, например, блока, который содержит текст, написанный слева направо и справа налево, потребуется свойство unicode-bidi . Оно сочетается со свойством direction и позволяет переопределить способ отображения текста браузером.

• Значение по дефолту: mixed | upright ;
• Применимо к: всем элементам, кроме строк и колонок таблицы;
• Наследуемость: да;
• Возможность анимации: нет.

mixed: значение по умолчанию; горизонтально расположенные символы поворачиваются на 90° по часовой стрелке, а вертикально — отображаются в их естественной первоначальной ориентации.

upright: горизонтальные символы сохраняют свое дефолтное расположение; если в этом режиме повернуть строку текста так, чтобы символы располагались боком, то это значение повернет их на 90 ° в их естественное положение (это значение заставляет свойство direction принимать значение ltr ; в результате все символы обрабатываются так, как если бы они располагались в режиме письма слева направо);

sideways: весь текст в режиме вертикального письма отображается боком, как если бы он был в горизонтальном расположении; вся строка поворачивается на 90° по часовой стрелке;

sideways-right: некоторые браузеры воспринимают это значение как синоним sideways , используемый для обратной совместимости.

Свойство use-glyph-orientation было удалено в декабре 2015 года. Оно использовалось в элементах SVG для определения свойств glyph-orientation-vertical и glyph-orientation-horizontal , которые на сегодняшний день являются устаревшими. Аналогом ориентации текста в SVG теперь является glyph-orientation-vertical .

Текст

.text

Поддержка браузерами CSS text-orientation

Ориентация текста в CSS3 является относительно новой возможностью и может претерпеть синтаксические изменения и в будущем. Она поддерживается всеми основными браузерами, кроме Internet Explorer . Для достижения полной кроссбраузерности можно прибегнуть к некоторым альтернативным вариантам.

Прежде чем использовать CSS свойство text-orientation , необходимо сначала изучить понятия блочного потока и направления встроенного потока.

Свойство writing-mode

Оно определяет, имеют ли строки текста горизонтальную или вертикальную ориентацию, и может принимать три значения:

1. horizontal-tb ;
2. vertical-lr ;
3. vertical-rl .

Использование writing-mode предусматривает наличие двух ключевых понятий:

• Block Flow Direction: указывает направление, в котором текстовые блоки располагаются внутри своего родителя (сверху вниз, слева направо или справа налево;
• Inline Flow Direction: определяет направление символов внутри строки текста и место начала новой строки (может быть как горизонтальным, так и вертикальным).

Чтобы добиться вертикальной ориентации текста, достаточно установите для свойства writing-mode значение vertical-lr (или vertical-rl ), а для text-orientation — upright .

 
Образец текста
 
Образец текста





 
Образец текста
 

.block < display: flex; justify-content: center; align-items: center; text-align: center; margin: auto; font-size: 2rem; color: #fff; background: #000; >.horizontal-tb < writing-mode: horizontal-tb; >.vertical-rl < writing-mode: vertical-rl; >.vertical-lr

Альтернативные методы

Word-break

Определяет, как происходит разрыв строки, когда текст достигает ее конца и переполняет родительский контейнер.

• normal: значение по умолчанию (перенос строки возможен только при явном его указании, например при помощи тега
  ;
• break-all: во избежание переполнения родителя последнее слово разбивается с переносом на новую строку (не применимо к текстам на китайском, японском и корейском языках);
• keep-all: действует как normal , но для китайского, японского и корейского языков слова не переносятся;
• break-word: во избежание переполнения блока остающиеся целыми слова разбиваются произвольно при отсутствии более подходящего места для переноса строки.

В отличие от text-orientation , свойство word-break поддерживается всеми браузерами, включая все версии Internet Explorer .

Создание вертикального текста с помощью свойства word-break

Для этого потребуется уменьшить ширину контейнера до 0 пикселей. Это приведет к тому, что все слова будут разбиты на буквы и выстроятся вертикально. В этом случае следует также установить свойство white-space для предварительного переноса. Это позволит обеспечить наличие пробелов, чтобы можно было различать слова.

 
Образец текста





 

.block

Word-wrap/overflow-wrap

Позволяет разбивать длинные слова и переносить их на следующую строку и имеет полную поддержку браузерами. В отличие от word-wrap , альтернативное свойство overflow-wrap пока только частично воспринимается IE .

• normal: перенос строк осуществляется при явном указании, например с помощью тега
  ;
• break-word: позволяет автоматически разрывать слова для переноса в произвольной точке;
• initial: устанавливает значение по умолчанию;
• inherit: передает значение свойства от родительского элемента дочернему.

Создание вертикального текста свойством word-wrap

Этот вариант позволяет использовать аналогичный подход, что и в случае с применением word-break . Достаточно уменьшить ширину контейнера до 0 пикселей и заставить каждое слово разбиваться на отдельные буквы, которые выстраиваются вертикально. Также потребуется применить свойство white-space для предварительного переноса, чтобы обеспечить наличие пробелов. Это позволит нормально различать слова.

Тег br

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

Обертывание в тег span

Еще один популярный метод — обернуть каждую букву текста в тег span и с помощью CSS назначить им display: block . Как и использование тега
, этот способ не очень удобен для больших текстовых строк.

Использование JavaScript

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

Заключение

Создание вертикально текста всегда было проблемой в CSS с незапамятных времен. Ни один из возможных способов не мог гарантировать безупречный результат. Однако введение нового свойства text-orientation в CSS3 полностью решило эту проблему. Несмотря на это, не следует забывать о резервных вариантах для Internet Explorer , чтобы обеспечить максимальную кроссбраузерность.