CSS text-spacing Demo

text-spacing is a CSS property defined in CSS Text Module Level 4 that controls spacing around punctuation and between ideographic (CJK) characters and other character types. It's especially useful for Chinese, Japanese, and Korean typography, where fullwidth punctuation marks often have built-in whitespace that may need trimming or adjusting for polished layouts.

Key values include trim-start (removes leading space from fullwidth punctuation at line start), space-first (preserves that space), ideograph-alpha (adds ¼em gap between CJK and Latin letters), and ideograph-numeric (same for digits).

trim-start: Removes the leading whitespace of fullwidth punctuation marks (like 「, （, 《) when they appear at the start of a block or line. This makes the text visually flush with the container's left edge.

space-first: Preserves that whitespace, keeping the punctuation's natural fullwidth spacing intact. The text will appear slightly indented if the first character is a fullwidth punctuation mark.

In traditional Chinese print typography, space-first is often the default, while trim-start is preferred in modern web layouts for cleaner alignment. The visual difference is subtle but meaningful for professional typesetting.

ideograph-alpha automatically inserts a ¼em space between CJK ideographs (hanzi, kanji, hangul) and adjacent Latin letters. Without this spacing, mixed-language text like "使用CSS进行排版" can look cramped, with Chinese characters and English letters touching each other.

With ideograph-alpha enabled, the same text displays as "使用 CSS 进行排版" (with subtle spacing), significantly improving legibility in multilingual content. This is especially valuable for technical documentation, UI labels, and internationalized websites.

As of 2024–2025:

• Chrome 119+ / Edge 119+: Full support ✅
• Firefox: Partial — supports some values behind flags; full implementation in progress
• Safari: Limited — WebKit has partial support; trim-start and space-first may not work
• Mobile browsers: Chrome Android supports it; iOS Safari support is limited

For production use, always provide a fallback and test across target browsers. The property is part of the Interop 2024 initiative, so cross-browser support is rapidly improving.

Yes! You can combine values by separating them with spaces. Common practical combinations include:

• text-spacing: trim-start ideograph-alpha; — trim leading punctuation + add CJK-Latin spacing
• text-spacing: trim-start ideograph-alpha ideograph-numeric; — all three enhancements
• text-spacing: normal ideograph-alpha; — default behavior plus CJK-Latin spacing

The order of values doesn't matter; the browser applies all specified features. Use no-autospace to explicitly disable ideograph-alpha and ideograph-numeric if they're being inherited or defaulted.

Indirectly, yes. While text-spacing doesn't directly influence search engine rankings, it improves readability and user experience for CJK audiences — which are positive UX signals. Better readability leads to lower bounce rates and higher engagement, both of which can positively impact SEO.

For multilingual websites targeting Chinese, Japanese, or Korean users, proper text-spacing demonstrates attention to locale-specific typography, enhancing credibility and user trust.

trim-end: Removes trailing whitespace from fullwidth punctuation at the end of a line or block — similar to trim-start but for the right/end side.

allow-end: Permits punctuation at line-end to hang outside the containing block (similar to hanging-punctuation). This is useful for justified text where a punctuation mark at line-end would otherwise push text to the next line.

Both affect line-end behavior, but allow-end is specifically about allowing punctuation to extend beyond the text block boundary for smoother line wrapping.