文字與排版
書寫模式writing-mode
Setting different writing mode.
Overview
| Class | Declarations |
|---|---|
writing-mode:horizontal-tb | writing-mode: horizontal-tb;
|
writing-mode:vertical-rl | writing-mode: vertical-rl;
|
writing-mode:vertical-lr | writing-mode: vertical-lr;
|
writing-mode:lr | writing-mode: lr;
|
writing-mode:lr-tb | writing-mode: lr-tb;
|
writing-mode:rl | writing-mode: rl;
|
writing-mode:rl-tb | writing-mode: rl-tb;
|
writing-mode:tb | writing-mode: tb;
|
writing-mode:tb-rl | writing-mode: tb-rl;
|
writing-mode:<mode> | writing-mode: <mode>;
|
Examples
Use vertical right-to-left flow
Use writing-mode:vertical-rl when text should flow vertically with columns progressing from right to left.
<p class="writing-mode:vertical-rl"> Vertical label</p>Generated CSS
@layer utilities { .writing-mode\:vertical-rl { writing-mode: vertical-rl }}Restore horizontal text
Use writing-mode:horizontal-tb to return nested content to normal horizontal flow.
<div class="writing-mode:vertical-rl"> <span class="writing-mode:horizontal-tb">ABC</span></div>Pair with text orientation
Use text-orientation:upright when characters should remain upright inside vertical writing.
<p class="writing-mode:vertical-rl text-orientation:upright">2026</p>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<p class="writing-mode:vertical-rl:hover writing-mode:horizontal-tb@sm writing-mode:horizontal-tb@print">...</p>