Press/to search

Typography

Writing Mode v1.1.1

Utilities for sets alignment of the text horizontally, vertically, or which direction depending on the language.


Class

classcss
text-horizontalwriting-mode: horizontal-tb
text-vertical-leftwriting-mode: vertical-lr
text-vertical-rightwriting-mode: vertical-rl
Note: Your browser does not currently support the utilities.

Usage

Set text element alignment to vertically and left to right direction.

ほえほふさ鵜れま瀬瀬樹知保ゅ瀬留すし魔離ひいめは舳トシテム日御等樹等かの毛派ゅ목숨이 산야에 우리의 있는 현저하게 것이 쓸쓸하랴? 없는 끓는 바이며. 가는統微代一月機隊転紹位責講行見三情川記手。手反者記来変動評歩沖氏波込度年容走。購
<!-- Example -->
<y class="text-vertical-left">
...
</y>

Set text element alignment to vertically and right to left direction.

ほえほふさ鵜れま瀬瀬樹知保ゅ瀬留すし魔離ひいめは舳トシテム日御等樹等かの毛派ゅ목숨이 산야에 우리의 있는 현저하게 것이 쓸쓸하랴? 없는 끓는 바이며. 가는統微代一月機隊転紹位責講行見三情川記手。手反者記来変動評歩沖氏波込度年容走。購
<!-- Example -->
<y class="text-vertical-right">
...
</y>

Set text element alignment to horizontally and left to right direction.

ほえほふさ鵜れま瀬瀬樹知保ゅ瀬留すし魔離ひいめは舳トシテム日御等樹等かの毛派ゅ목숨이 산야에 우리의 있는 현저하게 것이 쓸쓸하랴? 없는 끓는 바이며. 가는
<!-- Example -->
<y class="text-horizontal">
...
</y>

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.