CSSで、日本語と英数字のあいだに自動ですきまを入れる方法

​2026年11月13日​CSS​Playwright,日本語組版

日本語の文の中に HTML や 3 のような半角の英数字があると、前後の文字と詰まって見えます。CSS の text-autospace プロパティに normal を指定すると、漢字やかなと半角の英数字のあいだに、ブラウザーが自動ですきまを入れます。HTML に半角スペースを足す必要はありません。

body {
  text-autospace: normal;
}

書かないと、すきまは入らない

CSS Text 4 の仕様では、text-autospace の初期値は normal です。ところが互換性データの注記では、Chrome、Edge、Firefox、Safari はどれも、初期値が normal ではなく no-autospace（すきまを入れない）になっています。

検証環境の Chromium 153 でも、何も指定しない段落の計算値は no-autospace で、すきまは入りませんでした。すきまを入れたいときは、normal を自分で書きます。

text-autospace は子要素に継承されます。検証環境でも、body に normal を書くと、中の段落にすきまが入りました。サイト全体に効かせるなら、body に1回書けば足ります。

すきまの幅は1/8文字分

仕様では、入るすきまの幅は CJK の文字1つ分の幅の1/8（0.125ic）と決められています。検証環境の Noto Sans CJK JP では、全角の文字1つの幅が文字サイズと同じだったので、すきまの幅は文字サイズの1/8になります。

検証環境で「HTMLの第3章」という段落を、no-autospace と normal で表示して比べました。

16px の本文なら、1か所あたり2px です。

すきまは見た目だけのもので、文字は増えません。検証環境でも、normal の段落全体を選択して getSelection().toString() で取り出した文字列は、元の「HTMLの第3章」のままでした。仕様にも、コピーして貼り付けた文字列に影響してはいけないと書かれています。

すきまが入る場所と入らない場所

仕様では、すきまが入るのは「漢字やかな」と「半角の英字や数字」が直接となり合うところです。くわしい文字の範囲は、仕様の文字の種類どうしのすきま（Inter-script Spacing）の節に書かれています。

検証環境で、いろいろな文字の並びを normal で表示して、すきまが入った場所を調べました。

ひらがなとカタカナは、漢字と同じ扱いでした。全角の英数字のあいだには入りません。かっこや句読点、@ や # のような記号と英数字のあいだにも入りませんでした。

もともと半角スペースがあるところには、すきまは足されません。手で半角スペースを入れてある文章でも、すきまが二重になることはありません。

code や strong の境目にも入る

文の中で、英数字だけが <code> や <strong> に入っていることはよくあります。検証環境では、<code>CSS</code>の書き方 の S と の のあいだにも、<strong>HTML</strong>の の L と の のあいだにも、5px（文字サイズ40px）のすきまが入りました。このとき <code> のフォントは、等幅の Noto Sans Mono CJK JP にしています。

仕様では、あいだに padding などがあるときは、すきまを入れないとされています。ところが検証環境の Chromium 153 では、<code> に左右4pxの padding を付けても、S と の のあいだに5pxのすきまが入りました。そのため Chromium では、インラインの code に padding を付けていても、code と後ろの文字のあいだは padding にすきまの5pxを足した幅になります。

letter-spacing と重ねたときは、letter-spacing の空きに、すきまがそのまま足されます。仕様にそう書かれており、検証環境でも letter-spacing: 0.1em の段落でも、letter-spacing なしのときと同じく、1か所あたり5px（3か所で15px）広がりました。

pre の中では列がずれる

body に normal を書くと、<pre> にも継承されます。等幅フォントで文字の位置をそろえたコードやアスキーアートでは、漢字やかなと英数字がとなり合う行だけが広がり、列がずれます。

検証環境で、等幅フォント（Noto Sans Mono CJK JP、40px）の <pre> に + - | の記号で枠を描くと、|猫ABC| の行だけが5px広くなり、右端の | がずれました。

コードを表示する pre だけは、no-autospace に戻しておきます。

body {
  text-autospace: normal;
}

pre {
  text-autospace: no-autospace;
}

Chrome で使える値は normal と no-autospace だけ

仕様と MDN には、ほかにも値があります。ideograph-alpha は漢字やかなと英字のあいだだけ、ideograph-numeric は漢字やかなと数字のあいだだけに、すきまを入れます。insert と replace は、すでにある半角スペースをどう扱うかを決める値で、replace は半角スペースを取り除いて、すきまに置き換えます。auto は、すきまの幅をブラウザーに任せる値です。punctuation は句読点のまわりにすきまを入れる値ですが、仕様では、今のところ効くのはフランス語の文章だけとされています。

検証環境の Chromium 153 で CSS.supports() を使って調べると、受け付けたのは normal と no-autospace だけでした。auto、ideograph-alpha、ideograph-numeric、punctuation、insert、replace は、どれも false でした。

互換性データでの対応状況は次のとおりです。

Chrome・Firefox・Safari のどれでも使えるのは、normal と no-autospace の2つです。英字と数字のどちらか一方だけにすきまを入れたいときは、Chrome では効かないことを前提にしてください。

かっこや句読点の詰め方は、text-spacing-trim という別のプロパティで変えます。