Typography

Writing Mode

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

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
text-horizontal	writing-mode: horizontal-tb
text-vertical-left	writing-mode: vertical-lr
text-vertical-right	writing-mode: vertical-rl

Usage

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

ほえほふさ鵜れま瀬瀬樹知保ゅ瀬留すし魔離ひいめは舳トシテム日御等樹等かの毛派ゅ

목숨이 산야에 우리의 있는 현저하게 것이 쓸쓸하랴? 없는 끓는 바이며. 가는

統微代一月機隊転紹位責講行見三情川記手。手反者記来変動評歩沖氏波込度年容走。購

<div class="text-vertical-left">
...
</div>

HTML

.dummy {
  @extend
    .text-vertical-left;
}

SCSS

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

ほえほふさ鵜れま瀬瀬樹知保ゅ瀬留すし魔離ひいめは舳トシテム日御等樹等かの毛派ゅ

목숨이 산야에 우리의 있는 현저하게 것이 쓸쓸하랴? 없는 끓는 바이며. 가는

統微代一月機隊転紹位責講行見三情川記手。手反者記来変動評歩沖氏波込度年容走。購

<div class="text-vertical-right">
...
</div>

HTML

.dummy {
  @extend
    .text-vertical-right;
}

SCSS

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

ほえほふさ鵜れま瀬瀬樹知保ゅ瀬留すし魔離ひいめは舳トシテム日御等樹等かの毛派ゅ

목숨이 산야에 우리의 있는 현저하게 것이 쓸쓸하랴? 없는 끓는 바이며. 가는

<div class="text-horizontal">
...
</div>

HTML

.dummy {
  @extend
    .text-horizontal;
}

SCSS