Text styling
text-autospace
text-autospace decides whether to add a little space where Chinese or Japanese characters directly touch Latin letters or digits, so "CSSを学ぶ" reads like "CSS を学ぶ" without typing the space.
Syntaxnormal | auto …
normal | auto
| no-autospace
| [ ideograph-alpha || ideograph-numeric || punctuation ]
|| [ insert | replace ]Preview
Code
.box {
font-size: 18px;
text-autospace: normal;
}Controls
About
Values
normal: the same asideograph-alpha ideograph-numeric; adds space around both letters and digits. This is the initial value.no-autospace: adds no space.ideograph-alpha: only between ideographs or kana and Latin letters.ideograph-numeric: only between ideographs or kana and digits.auto: the browser picks good-looking spacing, which may differ between browsers and operating systems.
The added space is 1/8 of an ideograph's width (0.125ic). No space is added where a character such as a space already sits in between, or where an element boundary has margin, border or padding. The space is visual only, so it is not copied with the text.
Browser support
Chrome and Edge (version 140 and later) support only normal and no-autospace. Firefox (145 and later) and Safari (18.4 and later) also support auto, ideograph-alpha and ideograph-numeric. Because the initial value is normal, these browsers add the space even when you write nothing. No space is added where one is already typed, so spacing never doubles. Use no-autospace to remove the added space.
The spec also defines punctuation, which adds space around punctuation in French, and replace, which replaces typed spaces, but no browser supports them yet, so this page reads them from code without offering buttons. insert is the default way of adding space even when not written, so it has no button either.