How To Create Vertical Text With CSS (Simple Examples)
Welcome to a tutorial on how to create vertical text in CSS. Once upon a time in the Stone Age of the Internet, the direction of text is pretty much fixed on left-to-right. But thankfully, modern CSS has addressed the issue and supports vertical text with ease.
The easiest way to create a block of vertical text in CSS is to set a vertical writing mode on the element.
- <p style=»writing-mode: vertical-rl»>Vertical right to left.</p>
- <p style=»writing-mode: vertical-lr»>Vertical left to right.</p>
That covers the basics, but let us walk through some examples in this guide – Read on!
ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
Вертикальный текст на CSS
Какие в принципе существуют варианты, чтобы расположить текст вертикально на чистом CSS. Я, как минимум знаю два варианта, оба мы сейчас и рассмотрим.
HTML разметка
HTML разметка универсальна и подходит для любого варианта.
CSS свойство writing-mode (способ первый)
Поставим текст в центре экрана и поместим его в контейнер.
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];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 с Нуля до Гуру»
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Создаём повёрнутый текст с CSS свойством “writing-mode”
Adi Purdila Last updated Sep 17, 2018
В этой статье я покажу вам, как расположить текст на веб-странице сверху вниз, вместо слева-направо (или справа-налево). Есть два способа, один лучше другого, так что погнали!
Как использовать CSS правило “writing-mode”
Способ №1: преобразования в CSS
Если вы знакомы с CSS, то можете подумать, что transform — это лучший способ решения этого вопроса, но позвольте мне показать вам, почему он не идеален. Начнём с некоего содержимого (заголовки и параграф), затем применим transform , вместе с transform-origin , таким образом оно повернётся относительно правильной точки, затем отступ, чтобы оно не выходило за пределы экрана.
Такой подход работает для поворота текста, но не воздействует на положение в документе, поэтому у нас h2 , залез на содержимое под ним. Хотя, у нас получился прикольный абстрактный результат.
Способ №2: CSS writing-mode
Второй способ, поддерживает положение в документе, таким образом h2 останется истинных размеров, независимо от направления текста. Мы будем использовать свойство write-mode, например:
В этом случае, мы задаём значение 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 . Содержимое направлено справа, так что вы начинаете читать с права страницы и читаете в левом направлении. Но, что вы ещё, должно быть, заметили — символы всё-таки направлены наверх. Латинские символы с теми же правилами, были бы направлены по-другому. Это сделано специально:
Дальше вы можете подгонять ориентацию символов, используя свойство text-orientation .
Вывод
На момент написания, браузеры отлично поддерживают режим написания CSS, хотя он всё ещё в разработке. Всё, что вы видели я делал в этом уроке, уже можно использовать для рабочего сайта.
Не важно, используете ли вы это в практических или эстетических целях, давайте посмотрим на то, как вы это используете в комментариях!
Vertical text for table headers with CSS
In complex tables with lots of columns you will run into the problem of headers being too wide and causing the table to stretch beyond the available width. One solution is to use vertical text to render the headers.
You can also achieve this using images, but by doing so you lose the benefits of text:
- selectable,
- resizable,
- easier to style and update,
- easier to dynamically generate.
With the CSS transform attribute it is possible to rotate things vertically.
For Internet Explorer version 8 and below you have to do it differently:
There are some caveats. Browsers usually apply the transform at the end, so we have to take this into account and adjust the width/height accordingly. If you don't adjust the size of the container, its width/height will be the same as if the text wasn't rotated.
In the case of a table we will use a div inside each table cell, so we have more control to style the outcome.
Due to the differences in rendering between IE8 and below and the others browsers we will use two different stylesheets.
For IE8 and below:
For other browsers:
Here is a screenshot of the final result:
PS: If you use this code in a local file in IE8, it will display a warning because of the filter that's being used. You can enable it without problems. That warning is not displayed if you place the files in a server.