文字の装飾
text-autospace
text-autospace は、漢字や仮名と、英字や数字がじかに隣り合うところに、少しだけ空きを足すかどうかを決めます。「CSSを学ぶ」と書いても「CSS を学ぶ」のように読みやすくなります。
構文normal | auto …
normal | auto
| no-autospace
| [ ideograph-alpha || ideograph-numeric || punctuation ]
|| [ insert | replace ]プレビュー
CSSを7日で学ぶ
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
font-size: 18px;
text-autospace: normal;
}コントロール
text-autospacenormal
CSSを7日で学ぶ
解説
値の書き方
normal：ideograph-alpha ideograph-numericと同じで、英字の前後と数字の前後の両方に空きを足します。初期値です。no-autospace：空きを足しません。ideograph-alpha：漢字・仮名と英字の間にだけ足します。ideograph-numeric：漢字・仮名と数字の間にだけ足します。auto：ブラウザが見た目のよい空け方を選びます。ブラウザや OS によって変わることがあります。
足す空きは、漢字 1 文字の幅の 1/8（0.125ic）です。空白などの文字が間にあるところや、要素の境目に margin・border・padding があるところには足しません。見た目だけの空きなので、コピーした文字には入りません。
ブラウザの対応
Chrome・Edge（140 以降）は normal と no-autospace だけに対応しています。Firefox（145 以降）と Safari（18.4 以降）は auto・ideograph-alpha・ideograph-numeric にも対応しています。初期値が normal なので、これらのブラウザでは何も書かなくても空きが入ります。手で半角スペースを入れたところには足さないので、二重には空きません。足された空きをなくしたいときは no-autospace にします。
仕様にはほかに、フランス語の約物の前後に空きを足す punctuation と、もとからある半角スペースを置き換える replace もありますが、どのブラウザもまだ対応していないので、コードから読み込むだけでボタンには出していません。足し方のinsert は、書かなくてもそうなるもとの動きなので、こちらもボタンには出していません。