Vertical Writing
A writing direction in which text flows from top to bottom and lines progress from right to left. Traditionally used in Japanese, Chinese, and Mongolian, it is implemented on the web using the CSS writing-mode property.
Vertical writing (also called vertical typesetting) arranges characters from top to bottom, with lines progressing from right to left. In Japanese, vertical writing is the standard for newspapers, novels, manga, and calligraphy. Even today, the majority of printed publications in Japan use vertical layout. Traditional Chinese (used in Taiwan and Hong Kong), Mongolian, and classical Korean also employ vertical writing.
On the web, vertical writing is achieved with the CSS writing-mode property. Setting writing-mode: vertical-rl produces right-to-left vertical text (the Japanese standard), while writing-mode: vertical-lr produces left-to-right vertical text (used for Mongolian). All major browsers support these values, and they are actively used in Japanese web novel platforms and e-book readers.
Character rotation in vertical writing follows complex rules. CJK characters (kanji, hiragana, katakana, hanzi) are displayed upright, while Latin letters and certain symbols are rotated 90 degrees. The CSS text-orientation property controls this behavior: mixed (the default, which auto-detects by character type), upright (all characters displayed upright), and sideways (all characters rotated). To display two-digit numbers horizontally within a vertical line (tate-chu-yoko), use text-combine-upright: all.
The relationship between character counting and vertical writing is most apparent in line-length design. Japanese novels typically use 40 to 43 characters per line, with a standard paperback page consisting of 16 to 17 lines of 40 to 43 characters each. The traditional Japanese manuscript paper (genko yoshi) uses a grid of 20 characters by 20 lines, totaling 400 characters per sheet. These character counts have been refined over decades to optimize readability in vertical layout. CSS layout books on Amazon cover vertical writing implementation techniques.
Punctuation in vertical writing follows its own set of rules. Periods and commas are positioned in the upper-right corner of the character cell. Brackets are rotated 90 degrees, with opening brackets functioning as top brackets and closing brackets as bottom brackets. The prolonged sound mark "ー" becomes a vertical stroke, and dashes are also rendered vertically. These transformations are handled automatically by fonts based on Unicode character properties (Vertical_Orientation).
In responsive design, switching between vertical and horizontal writing based on screen width is an effective strategy. A site might use vertical writing on desktop for a literary aesthetic and switch to horizontal writing on mobile for better readability. However, the optimal number of characters per line differs between the two modes, so a simple toggle is not enough; the line length must be redesigned for each orientation.