CSS text-spacing-trim for CJK Punctuation Spacing

The CSS text-spacing-trim property provides native typographic control over the spacing around punctuation marks in Chinese, Japanese, and Korean (CJK) text. By automating the adjustment and removal of excessive whitespace inherent to full-width East Asian glyphs, this property ensures web content adheres to standard CJK typesetting conventions without requiring manual markup hacks.

The Problem with CJK Punctuation

In East Asian typography, characters and punctuation marks are traditionally designed on square typographic frames known as em-boxes. Full-width punctuation marks—such as commas (，), periods (。), quotation marks (「」), and brackets (（）)—typically occupy an entire em-box, leaving significant built-in whitespace on one or both sides of the character.

When multiple punctuation marks appear next to each other, or when a punctuation mark appears at the beginning or end of a line, this built-in whitespace accumulates. This results in visually disruptive gaps that break reading rhythm and compromise professional editorial standards. Historically, web developers had to rely on custom JavaScript, negative margins, or specialized web fonts to fix these spacing issues.

How text-spacing-trim Works

Part of the CSS Text Module Level 4, text-spacing-trim instructs the browser’s layout engine to intelligently trim the whitespace inside punctuation glyph bounding boxes based on the surrounding context. It allows browsers to perform automatic kerning and alignment for CJK punctuation, bringing native web rendering in line with professional print typography rules such as Japan's JIS X 4051 standard.

Key Property Values

The property offers multiple values to accommodate different cultural and editorial preferences:

  • normal: The default setting. The browser applies standard typographic rules, trimming whitespace between adjacent punctuation marks and at the start of lines to create balanced spacing.
  • space-all: Disables all automatic trimming. Every punctuation mark retains its full em-box width, preserving full spacing regardless of context.
  • trim-start: Trims the internal whitespace from opening punctuation characters at the beginning of each line, ensuring characters align flush with the text block's edge.
  • space-first: Similar to trim-start, but preserves full spacing for opening punctuation on the very first line of a block or paragraph, trimming them on subsequent wrapped lines.

Practical Impact on CJK Web Design

The adoption of text-spacing-trim modernizes East Asian web typography by making high-quality layout behavior declarative. It eliminates DOM bloat caused by wrapping punctuation in individual <span> tags, ensures proper alignment along line edges, and guarantees consistent spacing when text dynamically reflows across different screen sizes.