How CSS text‑autospace Fixes Chinese‑English Mixed Typography

Formerly Unsolved Era

According to Chinese typesetting standards, a tiny space should appear when Chinese characters are adjacent to Latin letters or numbers, known as “inter‑character spacing” for mixed scripts.

Previously developers tried various hacks: scripts that automatically insert spaces, font patches, or manually adjusting letter-spacing and word-spacing. These approaches often broke semantics, caused alignment issues, or behaved inconsistently across browsers.

For example, the sentence “我爱Vue，也爱React.” looked cramped without proper spacing.

CSS Solution: text‑autospace

The CSS Text Module Level 4 introduces the text‑autospace property. Setting it to normal automatically inserts appropriate visual spacing between CJK characters and Latin letters or numbers.

Before applying the property:

After applying the property:

The visual difference is subtle, but reading experience improves dramatically, especially for long passages with many mixed‑language fragments.

Zhihu has already enabled this CSS property. Kudos to content platforms!

Compatibility: The Long‑Awaited Support

The property has been in drafts for years, but now most modern browsers support it.

Thus the long‑standing Chinese‑English spacing issue can finally be solved with a standard CSS rule.

Usage Recommendations

Add a single line of CSS globally, for example in :root or body:

:root {
  /* Enable automatic mixed‑script spacing */
  text-autospace: normal;
}

For safety, wrap it in an @supports check so older browsers ignore the rule:

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

Older browsers will simply skip the declaration without errors.

Final Thoughts

For years developers have wrestled with the half‑space problem in Chinese web pages, using regexes, font tweaks, or custom plugins. Now a single standard CSS property resolves the issue, marking a new milestone for CJK typography on the web.