CSS: text-autospace プロパティを試す

1. このページの目的

CSS の text-autospace を試す。

2. デモ

指定なし

normal (ideograph-alpha と ideograph-numeric の両方を適用した場合と同じ効果を持ちます。)

no-autospace (CJK 文字と非 CJK 文字の間を自動的に空ける動作を無効にします。)

ideograph-alpha (漢字やカタカナなどの表意文字と、ラテン文字などの非表意文字の間にのみ、間隔を追加します。表意文字と非表意文字の数値の間には、間隔を追加しません。)

ideograph-numeric (漢字やカタカナなどの表意文字と、ラテン文字などの非表意数値の間にのみ間隔を追加します。表意文字と非表意文字の間の間隔は追加しません。)

punctuation (言語固有の組版規則が要求される場合、句読点の周囲に非分割スペースを追加します。)

insert (表意文字と非表意文字の間に既存の空白がない場合にのみ、指定された間隔を追加します。)

replace (表意文字と非表意文字の間の既存の空白（例：U+0020）を、指定した間隔で置き換えます。)

※ punctuation についてはよく分かってないため、この値に対して有効な例文になっていないと思います。

おまけ

英単語の前後に元々スペースを入れていた場合。

指定なし

normal

• 元々スペースがある場合に text-autospace: normal を指定しても、スペースが更に追加されることはないようだ。

3. メモ

• CSS property: text-autospace | Can I use... を見ると分かるが、ブラウザによってサポートされていない値がある。

4. 推奨される使い方

• CJK 文字と非 CJK 文字の間にスペースを入れたい場合、text-autospace: normal を指定すればよい。

5. 参考

• CSS Text Module Level 4 (W3C Working Draft)
• CSS Text Module Level 4 (Editor's Draft)
• text-autospace - CSS | MDN
• text-autospace | Can I use...
• CSS property: text-autospace | Can I use...