CJK and Mixed-Script Typesetting: Punctuation, Language, and Line Breaks

A multilingual interface is not a Latin layout with a few extra glyphs sprinkled in. One page may combine Japanese names, Korean controls, Chinese quotations, Latin model numbers, and punctuation whose shape or spacing changes with the language. The goal is not to make every script look identical. It is to keep reading order, emphasis, and line breaks coherent while each writing system follows its own conventions. A single global spacing rule rarely solves that whole problem.

Start With Language Metadata

Set the primary language on the document and mark meaningful changes inside it. Accurate metadata can help assistive technology choose pronunciation and gives language-aware browser features a better signal. It does not guarantee one exact pronunciation or wrap, because fonts, browser engines, and installed language resources still matter. Treat language attributes as truthful content metadata, not a visual toggle. A screen reader user should not need to infer a language from the appearance of the glyphs.

Line breaking is a collaboration between Unicode rules, CSS, the browser, the selected font, and the text itself. Unicode's line-break algorithm identifies opportunities; it does not select one ideal editorial layout for every paragraph. CSS can request tailored behavior, but a rule that suits a Japanese body paragraph may be wrong for a Latin identifier embedded in that paragraph. Begin with browser defaults and add a language-specific adjustment only after observing a concrete problem.

Keep Punctuation and Words Intact

Opening and closing punctuation should not be stranded at inappropriate line edges. East Asian typography has rules for punctuation hanging, prohibited starts or ends, and spacing that differ from common English conventions. The browser can handle many ordinary cases, but exact results depend on language and line-break settings. Test a real passage containing corner brackets, commas, periods, and a long inline Latin name. Do not insert special spaces everywhere as a substitute for understanding the wrap.

A forced break-anywhere rule can keep a narrow column from overflowing, but it may split URLs, serial numbers, or English words that readers expect to stay together. Conversely, a nonbreaking space may prevent a line break in exactly the wrong place and push a small screen into horizontal scrolling. Use overflow and word-break properties on the smallest suitable component, then test mixed content rather than assuming one declaration is safe for every script.

Automatic hyphenation is language-dependent. A browser needs a declared language and suitable hyphenation resources before it can make useful decisions; the visible pattern may still vary by platform. Hyphens that make sense in English should not be copied onto Chinese or Japanese text, which normally wraps without spaces between words. If a page contains multiple languages, scope language metadata and CSS to the actual text runs instead of applying English assumptions globally.

A Small Markup Example

<article class='article-copy' lang='en'>
  <h2><span lang='ja'>日本語の見出し</span></h2>
  <p>English text can include <span lang='ko'>한글</span>.</p>
</article>

<style>
.article-copy { line-break: auto; }
</style>

Font fallback deserves equal attention. A platform may draw Latin letters from one family and CJK glyphs from another, changing baseline, apparent weight, and punctuation spacing in the middle of a sentence. That is not automatically a defect: comprehensive CJK fonts can be large, and a high-quality system fallback may be a better performance choice. Verify that your chosen family contains the required characters before blaming CSS or forcing a single font that cannot render them.

Spacing should be judged in the script actually displayed. A tracking adjustment that gives a short Latin label room can look excessive when applied to a run of ideographs. A rule designed for full-width characters may loosen a compact model number. Prefer a small number of role-based styles, and scope exceptions to a meaningful language or component. Avoid hand-spacing individual characters; copy edits and translations will quickly expose the fragility.

Build a specimen from the content your product really has: opening and closing punctuation, full-width and Latin numerals, kana or Hangul, one long URL, and mixed-script product names. Try a narrow viewport, browser zoom, text-spacing overrides, and a font-loading failure. This reveals issues that a single-language placeholder paragraph hides, such as a stranded mark, a fallback baseline jump, or an identifier that becomes difficult to copy.

A Multilingual Review Checklist

• Set the page language and mark substantive language changes.
• Have a fluent editor review punctuation and localized copy.
• Check mixed-script fallback, baselines, and line endings.
• Test narrow screens before adding nonbreaking spaces.
• Record browser and font combinations for rendering-specific issues.

There is no universal CJK stylesheet that replaces localization review. Unicode and CSS provide valuable line-breaking controls, but publication choices still belong to the language and product. Let the browser handle ordinary opportunities, add targeted rules for demonstrated issues, and keep each intervention easy to remove when copy changes. The result should not make every script look alike; it should make every script feel intentional and readable.