Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

text-autospace

text-autospace は CSS のプロパティで、中国語/日本語/韓国語 (CJK) の文字とそれ以外の文字の間に空間を適用することができます。

多言語組版文字間スペース

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-autospace
140
140
145
18.4
140
18.4
auto
145
18.4
18.4
ideograph-alpha
145
18.4
18.4
ideograph-numeric
145
18.4
18.4
insert
実験的
145
no-autospace
140
140
145
18.4
140
18.4
normal
140
140
145
18.4
140
18.4
punctuation
replace
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.mixed-text {
  text-autospace: ideograph-alpha
    ideograph-numeric;
}

ライブデモ

autospe-s with

CSS autospe-s with demo.

プレビュー全画面表示

autospe-s none

CSS autospe-s none demo.

プレビュー全画面表示

Number. onlyauto

CSS Number. onlyauto demo.

プレビュー全画面表示

実務での使いどころ

  • 多言語テキストの自動スペーシング

    日本語と英語が混在するテキストで、文字種の境界に自動的に適切な間隔を挿入します。

注意点

  • 現時点ではブラウザサポートがなく、実験的な機能です。

アクセシビリティ

  • 適切なスペーシングはテキストの読みやすさを向上させ、すべてのユーザーにとってアクセシブルなコンテンツを提供します。

参考リンク