SVG Vertical Text with writing-mode

Setting writing-mode for Vertical Layout

Setting writing-mode="vertical-rl" or "vertical-lr" on an SVG text element switches its layout direction so characters flow top-to-bottom instead of left-to-right, which is essential for correctly typesetting Japanese, Chinese, or Korean text in its traditional vertical orientation, and also useful for vertical axis labels in charts and diagrams.

• vertical-rl and vertical-lr switch text flow to a top-to-bottom direction
• Essential for correctly typesetting traditional East Asian vertical text
• Also useful for vertical axis labels in charts, diagrams, and infographics

Combining writing-mode with Other Text Properties

When using vertical writing modes, related properties like text-orientation control whether individual characters themselves rotate or stay upright within the vertical flow, which matters differently for logographic characters (which typically stay upright) versus Latin script mixed into vertical East Asian text (which often needs rotation).

• text-orientation controls whether individual characters rotate or stay upright
• Logographic characters typically remain upright within vertical text flow
• Latin script mixed into vertical text often needs rotation for proper reading

Frequently Asked Questions

Related guides