Как сделать текст вертикальным css

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

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

HTML разметка

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

Vertical

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 с Нуля до Гуру»

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

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

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

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

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

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

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

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

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

Источник

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

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

Источник

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

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

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

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

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

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

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

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

Свойство writing-mode

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

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

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

Word-break

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

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

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

Word-wrap/overflow-wrap

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

Тег br

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

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

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

Заключение

Источник

Изменение направления текста

Многие свойства и значения, с которыми мы столкнулись до сих пор при изучении CSS, были привязаны к физическим размерам нашего экрана. Мы создаём границы, например, сверху, справа, снизу и слева от коробки.Эти физические размеры очень точно соответствуют контенту, который просматривается по горизонтали, и по умолчанию Интернет имеет тенденцию поддерживать языки с письмом слева направо (например, английский или французский) лучше, чем языки с письмом справа налево (например, арабский).

Какие бывают режимы письма?

Три возможных значения свойства writing-mode :

Writing modes and block and inline layout

We have already discussed block and inline layout, and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English.

When we switch the writing mode, we are changing which direction is block and which is inline. In a horizontal-tb writing mode the block direction runs from top to bottom; in a vertical-rl writing mode the block direction runs right-to-left horizontally. So the block dimension is always the direction blocks are displayed on the page in the writing mode in use. The inline dimension is always the direction a sentence flows.

This figure shows the two dimensions when in a horizontal writing mode.

This figure shows the two dimensions in a vertical writing mode.

Once you start to look at CSS layout, and in particular the newer layout methods, this idea of block and inline becomes very important. We will revisit it later on.

Direction

In addition to writing mode we also have text direction. As mentioned above, some languages such as Arabic are written horizontally, but right-to-left. This is not something you are likely to use in a creative sense — if you simply want to line something up on the right there are other ways to do so — however it is important to understand this as part of the nature of CSS. The web is not just for languages that are displayed left-to-right!

Due to the fact that writing mode and direction of text can change, newer CSS layout methods do not refer to left and right, and top and bottom. Instead they will talk about start and end along with this idea of inline and block. Don’t worry too much about that right now, but keep these ideas in mind as you start to look at layout; you will find it really helpful in your understanding of CSS.

Logical properties and values

The reason to talk about writing modes and direction at this point in your learning however, is because of the fact we have already looked at a lot of properties which are tied to the physical dimensions of the screen, and make most sense when in a horizontal writing mode.

What we really want in this scenario, is to essentially swap height and width along with the writing mode. When we’re in a vertical writing mode we want the box to expand in the block dimension just like it does in the horizontal mode.

To make this easier, CSS has recently developed a set of mapped properties. These essentially replace physical properties — things like width and height — with logical, or flow relative versions.

Logical margin, border, and padding properties

The margin-top property is mapped to margin-block-start (en-US) — this will always refer to the margin at the start of the block dimension.

You can see a comparison between physical and logical properties below.

You can also see that the

There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for Logical Properties and Values.

Logical values

For example, you can float an image left to cause text to wrap round the image. You could replace left with inline-start as shown in the example below.

Change the writing mode on this example to vertical-rl to see what happens to the image. Change inline-start to inline-end to change the float.

Here we are also using logical margin values to ensure the margin is in the correct place no matter what the writing mode is.

Should you use physical or logical properties?

The logical properties and values are newer than their physical equivalents, and therefore have only recently been implemented in browsers. You can check any property page on MDN to see how far back the browser support goes. If you are not using multiple writing modes then for now you might prefer to use the physical versions. However, ultimately we expect that people will transition to the logical versions for most things, as they make a lot of sense once you start also dealing with layout methods such as flexbox and grid.

Summary

The concepts explained in this lesson are becoming increasingly important in CSS. An understanding of the block and inline direction — and how text flow changes with a change in writing mode — will be very useful going forward. It will help you in understanding CSS even if you never use a writing mode other than a horizontal one.

In the next module we will take a good look at overflow in CSS.

Источник

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

Я думаю, многие из вас, кому приходилось заниматься версткой, сталкивались с необходимостью выравнивать элементы по вертикали и знают, какие сложности возникают при выравнивании элемента по центру.

Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений. Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.

Сравним следующие подходы. Выравнивание с помощью:

Задача состоит в том, чтобы выровнять внутренний элемент по центру внешнего элемента.

Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.

После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/

Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки ( inline-block ) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.

Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.

Выравнивание с помощью таблицы

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

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

Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.

Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.

Выравнивание с помощью отступов

Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (H_outer – H_inner) / 2.

Минус решения — оно применимо лишь в ограниченном числе случаев, когда известны высоты обоих блоков.

Выравнивание с помощью line-height

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

Выравнивание с помощью «растягивания»

Данный способ можно применять, когда высота внешнего блока неизвестна, но известна высота внутреннего.

Минус данного способа — должна быть известна высота внутреннего блока.

Выравнивание с помощью отрицательного margin-top

Этот способ получил широкую известность и применяется очень часто. Как и предыдущий, он применяется, когда высота внешнего блока неизвестна, но известна высота внутреннего.

Минус данного способа — должна быть известна высота внутреннего блока.

Выравнивание с помощью transform

Минус данного способа в ограниченной поддержке свойства transform старыми версиями браузера IE.

Выравнивание с помощью псевдоэлемента

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

Суть способа в добавлении внутри внешнего блока строчного блока inline-block высотой в 100% и задания ему вертикального выравнивания. В этом случае высота добавленного блока будет равна высоте внешнего блока. Внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока.

Минус данного способа — он не может быть применен, если внутренний блок имеет абсолютное позиционирование.

Выравнивание с помощью Flexbox

Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox ). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.

Минус данного способа − Flexbox поддерживается только современными браузерами.

Какой способ выбрать?

Нужно исходить из постановки задачи:

Источник