CSSのtext-autospaceでCJKと欧文の間隔が自動調整できるらしい

  • CSS
  • Web
  • Typography

この記事は、構成と文章の整理にAIを使っています。
あくまで読みやすくするための補助で、内容そのものをAIにすべて任せて書いているわけではありませんが、ところどころ相談しながら整えています。

日本語と欧文・数字が混在するテキストで、間隔が詰まって読みにくいことがよくある。「2024年」とか「TypeScript5」みたいなやつ。今まではこれを&nbsp;で挟んだり、CMS側で正規表現処理して<span>で囲んでletter-spacingを当てたりして対応してた。

CSSにtext-autospaceというプロパティがあって、これをCSS側だけで解決できるらしい。

text-autospaceとは

CJK(中国語・日本語・韓国語)文字と非CJK文字が隣接した時に、自動でスペースを挿入するプロパティ。word-spacingやletter-spacingとは別枠で、これらと加算的に効く。つまりletter-spacingで作った間隔にtext-autospace分が上乗せされる。

構文

text-autospace: normal | <autospace> | auto


<autospace> = no-autospace
  | [ ideograph-alpha || ideograph-numeric || punctuation ] || [ insert | replace ]

値の意味:

  • normal: CJKと非CJKの間、および句読点まわりに自動でスペースを入れるデフォルト挙動。ideograph-alphaとideograph-numericを両方適用したのと同じ
  • no-autospace: 何もしない
  • ideograph-alpha: 表意文字とラテン文字・キリル文字・ギリシャ文字などの間にスペース
  • ideograph-numeric: 表意文字と数字の間にスペース
  • punctuation: 句読点まわりのスペース調整
  • insert / replace: スペースの挿入方法(既存の空白を置き換えるか、追加で挿入するか)
  • auto: ブラウザ判断に委ねる

ブラウザサポート

2025年11月時点でBaseline 2025(Newly available)。最近のブラウザバージョンでは動くという扱いだが、「新しく使えるようになった」レベルなので古いSafariやFirefoxだと単に無視される(エラーにはならない)。

本番で使うならno-autospaceが効かなかった場合の見た目を前提に組んでおいた方が安全そう。実際のCMSやブログのレンダリングで検証したわけではないので、そこは未確認。

所感

和欧混在のスペーシング処理を、DOM側の<span>挿入やJS処理でやってた工程がCSS一発で済む可能性があるのはインパクトがある。ただしBaseline化したばかりの機能なので、既存のletter-spacing運用からいきなり乗り換えるより、まずは対象ブラウザで挙動を確認してからの導入が現実的そう。