No Login Data Private Local Save

writing‑mode Demonstrator - Online Vertical Text

Developer Tools Internationalization CSS text vertical writing‑mode
41
0
0
0

Writing Mode Demonstrator – Online Vertical Text Preview

Instantly visualize CSS writing-mode with live preview. Perfect for vertical CJK text, Mongolian, or creative typography.

Enter Your Text
Writing Mode Settings
Only active for vertical writing modes.
Live Preview
Hello World 你好世界
探索垂直排版
Exploring vertical text layout.
Generated CSS
writing-mode: vertical-rl; text-orientation: mixed; direction: ltr;

Frequently Asked Questions

The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically. The three main values are horizontal-tb (top-to-bottom, default for most languages), vertical-rl (vertical right-to-left, used in Japanese, Chinese, Korean) and vertical-lr (vertical left-to-right, used for Mongolian).

Simply apply writing-mode: vertical-rl; to the container. For upright Latin characters inside vertical flow, add text-orientation: mixed; or upright;. Use the demo above to experiment in real time.

vertical-rl flows text from top to bottom, and columns from right to left (typical for East Asian scripts). vertical-lr also goes top-to-bottom but columns progress left-to-right (used in Mongolian). Switching direction can further control block flow.

When writing-mode is vertical, text-orientation controls the rotation of characters. mixed keeps horizontal scripts sideways but upright for vertical scripts; upright forces all characters upright; sideways rotates all characters 90° clockwise (useful for tabular data).

All modern browsers support writing-mode including Chrome, Firefox, Safari, and Edge. Internet Explorer supported an older syntax; use modern values for broad compatibility.

Yes! Apply writing-mode to individual containers like <div> or <section>. The property respects nested contexts, so you can easily combine horizontal and vertical layouts.
🔧 Related Tools