Writing Mode

Set writing direction for RTL/vertical text

Syntax

visual="writing-mode:[value]"

Values

Value	CSS Output	Description
horizontal-tb	writing-mode: horizontal-tb	Left to right
vertical-rl	writing-mode: vertical-rl	Top to bottom RTL
vertical-lr	writing-mode: vertical-lr	Top to bottom LTR
sideways-rl	writing-mode: sideways-rl	Sideways RTL
sideways-lr	writing-mode: sideways-lr	Sideways LTR

Examples

<div visual="writing-mode:vertical-rl">Vertical text</div>
<div visual="writing-mode:horizontal-tb">Horizontal text</div>

Preview

Writing Mode

visual="writing-mode:vertical-rl" - Control text direction and orientation

horizontal-tb

vertical-rl

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <div space="p:small" visual="bg:primary text:white rounded:small">horizontal-tb</div>
   <div space="p:small" visual="bg:primary text:white rounded:small">vertical-rl</div>
 </div>