๐ Vertical Text Preview
Preview text in real time using CSS vertical writing mode (writing-mode: vertical-rl). Adjust the font size and toggle how numbers and letters are oriented within the vertical layout.
How to use
- Enter the text you want to preview.
- Adjust the font size with the slider.
- Toggle the character orientation (mixed/upright) to see the vertical preview update in real time.
How the calculation works
This tool displays your text vertically using the browser's CSS, with two properties: writing-mode: vertical-rl and text-orientation. writing-mode: vertical-rl lays characters out from top to bottom and lines from right to left, the same way Japanese vertical text is set. text-orientation controls how Latin letters and digits sit inside vertical text: "Mixed" rotates them 90 degrees so they lie on their side, and "Upright" stands each one up individually. Font size ranges from 12 to 48 pixels. Punctuation (ใใ), brackets and the long-vowel mark (ใผ) switch to their vertical forms, as provided by the browser and font.
Worked example
Input: ๆฐๅญใฎ12ใABCใฎๅใใ็ขบ่ชใงใใพใใ Mixed "12" and "ABC" are rotated 90 degrees clockwise; you would tilt your head to the right to read them. Upright "1", "2", "A", "B" and "C" each stand upright, stacked from top to bottom. Tate-chลซ-yoko (fitting a two-digit number side by side into one character cell) is not available in this tool.
Things to be aware of
- Newspapers and novels often use tate-chลซ-yoko, which sets a short number horizontally within one character cell. This tool does not support it.
- The position of ใ and ใ and the orientation of brackets depend on the font.
- Real typesetting also needs Japanese line-breaking rules (kinsoku), such as keeping punctuation off the start of a line. Do the final check in your layout software or the actual display environment.
FAQ
What's the difference between "mixed" and "upright"?
"Mixed" rotates Latin letters and digits 90 degrees clockwise so they lie sideways along the line, while Japanese characters stay upright. "Upright" stands every Latin letter and digit up on its own and stacks them top to bottom.
Does this render correctly in every browser?
Major modern browsers (Chrome, Firefox, Safari, Edge) support the CSS writing-mode property, but older browsers may not render it correctly.
Can I use this for final typesetting of a novel or article?
It's handy for a quick visual check, but real print or app typesetting usually needs finer control โ line spacing, Japanese line-breaking rules (kinsoku), and more.