If you are setting a couplet for a doorway, a shop sign, or anything else that runs top to bottom, the characters are the easy part. The punctuation is where it goes wrong, because turning Chinese text sideways does not turn its punctuation sideways — several marks become different characters, and no amount of rotating gets you there.
Quotation marks change shape, not angle
Horizontal Chinese uses the curly quotation marks familiar from English. Vertical Chinese does not use rotated versions of them. It uses corner brackets — 「 」 for the outer level and 『 』 for the inner — which are separate characters with their own code points.
This is a typographic convention, not a geometric transformation. A rotated curly quote is still just a rotated curly quote, not a corner bracket. To a reader, it looks as wrong as a sideways comma.
If you are typing the text yourself, type the corner brackets directly. If you are converting existing horizontal text, the substitution has to be made deliberately, because nothing will make it for you.
The full stop moves, and not to where you would guess
The other marks stay themselves but change position, and the rule is not uniform across them.
The full stop, comma, enumeration comma, semicolon, colon, question mark and exclamation mark all sit below the character they follow, offset to the right of the column's centre line. The dash, ellipsis and interpunct also sit below, but centred.
The standard that governs Chinese punctuation sets out two different positioning rules for these two groups of marks. Getting them right is what separates typeset Chinese from text that has merely been stood on its end.
What CSS will and will not do for you
The web has a property for vertical text, and it does the part it claims to: it turns the writing direction, stacks the characters, and flows the lines right to left. Every tutorial stops there, and every tutorial is describing about half the job.
What it does not do is substitute the quotation marks, because that is a change of character rather than a change of orientation, and a layout engine is not going to rewrite your content. Positioning of the smaller marks is handled by the font and the layout engine together, with results that vary by both, so the same markup can look correct in one browser and subtly wrong in another.
The practical consequence is that any tool which rotates the marks without substituting them will produce typographically incorrect output. Our own vertical text formatter is one of them, and it is worth being plain about that: it offers a classical setting that rotates the punctuation and a modern one that leaves it upright, and both are changes of orientation. Neither substitutes the vertical forms. It has rotated the characters, but it has not converted the punctuation.
Setting a couplet
Traditional couplets mostly sidestep the whole problem, which is worth knowing before you go looking for punctuation to place: they are typically set without any. The two lines are parallel by construction and the pairing does the work punctuation would otherwise do.
So if you find yourself reaching for a comma while setting a couplet, check whether the form uses one at all. Where punctuation does appear — in a longer inscription, a plaque, a piece of prose set vertically — the rules above apply, and the corner brackets are the substitution most likely to be missed.
The other convention worth getting right is direction. Vertical Chinese columns read right to left, so the first column is the rightmost one. Setting the columns left to right is the most visible possible error and the easiest to make with software that was built for horizontal text.
What is changing in browsers
Some of the finer typesetting behaviour has been arriving in CSS relatively recently — spacing between Han characters and adjacent Latin or numerals, and the trimming of space around full-width punctuation. Support has been improving, but behaviour still differs between browser versions. It is better to test than to assume.
Test in the browsers you actually care about, at the size you will actually use, and check the punctuation specifically rather than glancing at the overall shape. Misplaced marks are the kind of error that looks fine at a glance but wrong on close inspection — the reverse of what you want for something that goes on a wall.
Where this comes from, and what will date
The punctuation rules are from the Chinese national standard on punctuation usage. For an English-language reference, the right citation is the W3C's Requirements for Chinese Text Layout, known as CLREQ — a Working Group note produced for exactly this purpose, and the document to look up if you want the rules in more detail than this guide gives. A W3C news post from 2013 is sometimes cited as an official translation of the national standard, but the post itself says it is a partial translation and is better read as commentary.
The standard is stable, but browser behaviour is not. The support described here is as at the time of writing. The typographic rules, however, will outlast any particular implementation.
