A Historic Breakthrough in Chinese Front‑End Typography with CSS text‑autospace

When building content‑heavy web applications, developers often notice that Chinese characters mixed with English words or numbers look cramped and uncomfortable, a problem that persists regardless of font choice or manual kerning.

Era of No Solution

According to Chinese typesetting standards, a tiny space should appear between CJK characters and Latin text or digits, known as “mixed‑script spacing.” Historically, developers resorted to ad‑hoc methods such as automatically inserting spaces via scripts, applying font‑file spacing patches, or forcibly setting letter-spacing and word-spacing. These hacks either broke semantics, caused alignment errors, or behaved inconsistently across browsers.

我爱Vue，也爱React。

Such cases often required trial‑and‑error adjustments.

CSS Answer: text-autospace

The latest CSS Text Module Level 4 introduces the text-autospace property, whose core purpose is to automatically handle spacing between ideographic (Chinese, Japanese, Korean) and non‑ideographic (Latin, digits) characters. text-autospace: normal; In plain terms, the browser inserts an appropriate visual gap between CJK and Latin/digit characters, making the layout feel more natural and breathable.

Before applying the property, mixed text appears tightly packed:

After adding the property, the same content gains subtle spacing, dramatically improving readability:

The difference is slight but the reading experience is completely transformed, especially in pages with extensive mixed‑script content.

Currently, Zhihu has enabled this CSS property. As a content platform, they deserve a thumbs‑up!

Compatibility: The Golden Age Arrives

The property was proposed in drafts many years ago but lacked implementation until recently. Now, all major browsers have added support, meaning developers can rely on it in production.

Thus, the long‑standing “small awkwardness” of Chinese mixed‑script layout can finally be solved with a standard CSS rule.

Usage Recommendations

Applying the property is straightforward—add a single line of CSS globally, for example in the body or :root selector: :root { text-autospace: normal; } For safety, include an @supports check so older browsers simply ignore the rule:

@supports (text-autospace: normal) { :root { text-autospace: normal; } }

Older browsers will skip the declaration without errors.

Conclusion

For years, Chinese web developers have wrestled with the lack of proper spacing between CJK and Latin characters, resorting to regexes, font tweaks, and custom plugins. Now a standard CSS property— text‑autospace: normal —solves the problem, marking a new milestone for Chinese typography on the web.

text-autospace: normal;