Css vertical text wrap

CSS text-orientation Property

Set the text orientation for different elements:

div.b text-orientation: upright;
>

Definition and Usage

The text-orientation property specifies the orientation of characters.

Note: Works only when writing-mode is set to vertical.

Default value:	mixed
Inherited:	yes
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.textOrientation=»upright» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
text-orientation	48.0	79.0	41.0	14.0	35.0
sideways (property value)	Not supported	Not supported	44.0	Not supported	Not supported

CSS Syntax

Property Values

Value	Description	Demo
mixed	Deafult value. Characters are rotated 90 degrees clockwise.	Demo ❯
upright	Characters are not rotated, but standing upright.	Demo ❯
sideways	Only supported in Firefox. Characters are orientated the same as the text lines are oriented with writing-mode vertical, 90 degrees clockwise.
sideways-right	Equal to property value sideways. Kept for compatibility purposes.
use-glyph-orientation	For use in SVG elements, so that text inherits deprecated SVG properties glyph-orientation-vertical and glyph-orientation-horizontal.
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

The text-orientation property can be used to change orientation in table headers:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

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

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

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

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

Свойство writing-mode

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

Использование 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 для предварительного переноса. Это позволит обеспечить наличие пробелов, чтобы можно было различать слова.

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 , чтобы обеспечить максимальную кроссбраузерность.

Источник

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.

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.

TLDR – QUICK SLIDES

TABLE OF CONTENTS

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

VERTICAL TEXT WITH CSS

All right, let us now get into the various examples of setting vertical text with CSS.

1) CSS WRITING MODE

 .horiA < writing-mode: horizontal-tb; >.vertiB < writing-mode: vertical-rl; >.vertiC 
Horizontal Top-To-Bottom (Default)
 
First Line.
 
Second Line.
 
Third Line.
 
 
Vertical Right-To-Left
 
First Line.
 
Second Line.
 
Third Line.
 
 
Vertical Left-To-Right
 
First Line.
 
Second Line.
 
Third Line.
 

• horizontal-tb Horizontal, top-to-bottom. This is the default when nothing is set.
• vertical-rl Vertical, right-to-left.
• vertical-lr Vertical, left-to-right.

• Horizontal top-to-bottom: writing-mode: lr
• Vertical right-to-left: writing-mode: tb-rl
• Vertical top-to-bottom: writing-mode: tb-lr

2) CSS TEXT ORIENTATION

 .vertical < writing-mode: vertical-rl; >.upright < text-orientation: upright; >.sideways 
Default (Mixed) Orientation
 
First Line.
 
Second 中文 Line.
 
Third Line.
 
 
Upright Orientation
 
First Line.
 
Second 中文 Line.
 
Third Line.
 
 
Sideways Orientation
 
First Line.
 
Second 中文 Line.
 
Third Line.
 

• mixed – The default setting for text orientation. Where vertical scripts such as Chinese Characters will be shown upright, but English Characters rotated 90° clockwise.
• upright – Where all the characters will be forced to show upright.
• sideways – All the characters will be forced to rotate 90° clockwise.

3) VERTICAL TEXT USING ROTATE

Finally, this is a funky alternative that is worth considering if the above writing mode somehow doesn’t work as intended.

• Simply use transform: rotate(90deg) to rotate a block of text 90 degrees clockwise; If you want the text to face the mirror direction, use transform: rotate(-90deg) to rotate 90 degrees counter-clockwise instead.
• But one big problem with using this rotation method is the text block ending up in a weird position. We will need to follow up with transform-origin: X-AXIS Y-AXIS Z-AXIS to define the rotation point… Or use margin and position to help reposition properly.

While this method is a little more inconvenient, we have more controls and can literally skew and rotate the text to any angle we want.

EXTRA BITS & LINKS

That’s all for this project, and here is a small section on some extras that may be useful to you.

COMPATIBILITY CHECKS

Most modern “A-Grade” browsers are able to render vertical text and rotate properly. But if you have to support the ancient browsers, you will have to fall back to”manually type out vertical text”.

LINKS & REFERENCES

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Источник