How to use the vertical text layout guide
Writing vertical text in CSS breaks the instincts you built on horizontal setting. Because the line length becomes the height and the stacking direction becomes the width, converting sizes in your head is where the mistakes happen. This tool takes a font size, glyph advance, characters per line, line spacing and line count, returns the block's width and height, and writes the writing-mode CSS.
There are two formulas. Line length = characters per line x advance x font size, and that is the block's height. Block width = lines x font size x line spacing. Add a container height and it works backwards to how many characters that height holds, then compares it with your per-line figure. Written as of October 2026.
There is no authoritative figure for line width or letter spacing in vertical setting, so no recommendation is offered and everything is computed from your inputs. The tool also does not handle per-glyph advance differences, line-breaking prohibition rules, ruby annotation or the vertical forms of brackets and quotation marks. The generated code carries only the writing-mode, text-orientation and text-combine-upright syntax, so check the real setting in a browser.
Frequently Asked Questions
There is none. Line width and letter spacing in vertical setting shift with page size, typesetting tradition and typeface, and no authoritative figure exists. The tool therefore offers no recommendation and only turns your values into sizes and syntax.
Under writing-mode: vertical-rl a line runs from top to bottom, so the length of one line is the block's height, while the direction the lines stack in, right to left, becomes its width.
The default text-orientation: mixed rotates Latin characters to follow the vertical flow. The convention of setting a two-digit number upright in one cell is handled by text-combine-upright: all, which is included in the generated code.