Punctuation and wrapping: a rhythm for both languages

A bilingual page is more than a Chinese paragraph replaced with English. The same button, heading, or passage occupies different lengths in each language. A layout tested in only one may force the other into ellipses, smaller type, or awkward breaks. Before trying to align both versions perfectly, make each understandable on its own.

Start with punctuation and spacing

Chinese commas, full stops, brackets, and quotation marks shape the visual rhythm as well as the grammar. Spaces between English words form a different basic unit. Do not replace all Chinese punctuation with narrow Latin forms to make the page appear international, or insert repeated spaces around every number and English fragment. Choose a clear editorial convention and inspect the actual typeface.

“用 SVG 导出一枚 32 px 图标” and “Export a 32 px SVG icon” convey corresponding information without having the same length. Keep product names, dimensions, and links consistent while allowing natural word order. A poetic heading also need not become an awkward literal translation; its English version should accurately perform the same invitation.

Do not let wrapping rewrite the sentence

Inspect brackets, quotation marks, and pauses in a narrow view. Chinese typesetting considers which punctuation is unsuitable at the start or end of a line, but the rules allow different degrees of strictness. One treatment is not the only answer for all content. W3C Requirements for Chinese Text Layout discusses these cases.

Prepare a stress-test sample: a long Chinese heading with title brackets, a sentence containing an English project name, a measurement, and a long URL. Check for overflow and unhelpful breaks. For a long link, overflow-wrap: anywhere can introduce extra opportunities when needed; that does not make arbitrary breaks a good default for every ordinary word. MDN overflow-wrap

Match information rather than height

The two versions of an article can use different paragraph lengths while preserving the argument, examples, limitations, and steps. Do not turn English into a decorative summary or remove an important warning to make columns align. A language switch should ideally keep the reader in the same article or tool state instead of returning them to the homepage.

For today's exercise, open a bilingual sample in the typography workshop. Try long-form settings, then narrow the preview. Record three issues and decide whether each comes from the wording, the typeface, or the container. A shorter button label may solve one without complicated CSS; another may require a layout change rather than endlessly shortening the content.

Keep this sample as a stable reference. Use it again when changing fonts, spacing, or heading scales. A consistent comparison reveals more than a new sentence of placeholder text each time.