最近、新たなCSSプロパティ text-autospace が主要なWebブラウザーでサポートされました。どうしても和文と欧文の交ぜ書きが多くなる技術ブログにおいて、待望のプロパティです。そのあらましと、このブログにおける採用について紹介します。
デジタル改革推進部の小林です。普段は社内ID基盤のプロダクトオーナーをやっています。きょうはブログ運営チームの一員として、この記事を書いています。
この記事のエッセンスとしては「やったこと」と「将来」をお読みいただければ十分ご理解いただけることと思います。「背景」は読み物としてお楽しみください。
やったこと
2026年6月末に、このブログのCSSに次の指定を入れました。
.entry-content p, .entry-content ul, .entry-content ol { text-autospace: normal; }
本文について、和文と欧文（数字含む）の間に細い空白（八分アキ。厳密には「水」の8分の1の幅の空白）が自動的に挿入されます。これにより、記事がより読みやすくなりました。
こちらが変更前後のイメージです。「NTT」や「2015年6月」などに特徴が出ます。この処理は対象とする文字種の選択がかなり工夫されていて、必要のない位置、例えば句読点や括弧と欧文の組み合わせでは空白が入らないようになっています。
コードスニペットや本文以外の要素（見出し、カテゴリー、右サイドパネルなど）にはこの指定をしていませんので、従来通り詰め組みになります。本文以外の要素を対象外としたのは、長文で構成されるのがまれなこと、また1画面にできるだけ多くの内容を詰めた方がよい要素だと判断したことによります。
text-autospaceは、Baseline 2025に収録されており、2025年11月以降主要なWebブラウザーでサポートされています。詳しいリファレンスは次を参照してください。
背景
背景について述べるには、印刷の話を少ししないといけません。
印刷の分野において、日本語の文（和文）に西洋言語の文（欧文）を混ぜてレイアウトすることを和欧混植といいます。和文と欧文の組版はそれぞれ異なる文化を取り込んで成長してきました。代表的なところでは次の表に述べるような差があります。
| 特徴 | 和文 | 欧文 |
|---|---|---|
| 使う文字の形 | 正方形 | 幅も高さもまちまち |
| 文字の並べ方（組み方） | 隙間を空けずきっちり並べる（ベタ組み） | 1単語を構成する字は隙間なく並べ、単語の区切りに空白を入れる |
| 1行の文字数 | 和文のみであれば常に一定 | かなりまちまち |
| 行揃え | 字の大きさを変えない限り、自動的に行頭行末が揃う | 単語間の空白の量を行ごとに調整して両端揃え（箱組み）にするか、左だけ揃えて右を揃えない |
| 本文における行間 | 字の高さの25％から75％程度空ける | まったく空けないこともある |
こうした異なる文化を持つ組版の作法をいかに融合させるか、過去からさまざまな試行錯誤がされてきました。その成果として、多くの横書きの印刷物では和文と欧文の間には四分アキ（全角文字の4分の1の幅の空白）を挿入するのがスタンダードになっています（この空白を和欧文語間といいます）。和文と欧文では文字のデザイン手法に差があることから、ぴったり詰めて組むと詰まった印象を受けるためとされています。
ちなみにMicrosoft Wordにおいて、和文と欧文の間に自動的に入る見た目上の空白もこれが理由です。pTeXに起源を持つ日本語TeX処理系も同様で、TeXソースコードにおいてこの目的のために故意に空白文字を入れるのはよろしくないとされています（その自動調整が作用しなくなるため）。
こうした和欧混植を含め、日本語の印刷物の組版（レイアウト）をいかにしてなすべきかについての標準として、「JIS X 4051 日本語文書の組版方法」が存在します。これをベースにしたW3C Working Group Noteとして Requirements for Japanese Text Layout （日本語組版処理の要件）が提供されています。その序論に、この文書をリリースするに至った目的が端的に記されていますので、引用します。
すべての文化集団は，独自の言語，文字，書記システムを持つ．それゆえ，個々の書記システムをサイバースペースに移転することは，文化的資産の継承という意味で，情報通信技術にとって非常に重要な責務といえよう．
この責務を実現するための基礎的な作業として，この文書では，日本語という書記システムにおける組版上の問題点をまとめた．具体的な解決策を提示することではなく，要望事項の説明をすることにした．それは，実装レベルの問題を考える前提条件をまず明確にすることが重要であると考えたからである．《日本語組版処理の要件（日本語版） 序論 この文書の目的より》
「日本語組版処理の要件」では、和欧文語間のように行内の文字の組み方に限らず、印刷物の基本となる体裁、見出しの取り方、ルビ（ふりがな）の付け方などについても広範に論じられています。
ちなみに「日本語組版処理の要件」が基本となって、昨今電子書籍市場で広く使われるフォーマット “EPUB” の日本語対応が進みました。EPUB 3では縦書きやルビといった日本語ならではの表現に対応し、日本の商業出版における電子書籍（特にリフロー対応）の市場拡大につながりました。「日本語組版処理の要件」がEPUBの日本語対応にどのような役割を果たしたか、当時関わった方々が述懐されていますので興味ある方は覗いてみてください。
今回のtext-autospaceの実装に関しても、「日本語組版処理の要件」が参照されたと聞いています。このほか、ルビの表示方法などいくつかW3Cで議論されているテーマがあるそうです。
わたしにとってWebの原体験は「Internet Explorer上で詰め組みにされたＭＳ Ｐゴシック」とともにあったので、今回CSS仕様に日本語文書に由来する表現手法が盛り込まれたことにはちょっとした感動を覚えました。時代を遡れば日本語の文字がWebブラウザー上に表示されているだけでもすごい時代があったのだと思いますが、時代が下るにつれてより高度な、より文化固有の表現を実現したくなるのは当然の要望であり、こうした先人の足跡にはただ頭が下がります。
将来
このブログでは、従来和欧文語間（空白）に関する規則がなかったため、和欧文間が詰めてある記事と空白 (U+0020) が入れてある記事とが混在しています。今後リリースされる記事ではこの目的での空白挿入は禁止しますが、従来記事の修正は積極的には行わない方針です。
ただ、text-autospaceには興味深い指定 replace があります。リファレンスでは「表意文字と非表意文字の間の既存の空白（例：U+0020）を、指定した間隔で置き換えます」と説明されており、上記のような記事をレンダリング時に補正して見た目を整えられるようになります1。
利点はそればかりではありません。例えば アドベントカレンダー 3 日目の記事です のように空白入りで書かれている記事の場合、現状Webブラウザーのページ内検索機能では空白なしの 3日目 と検索するとヒットしません。これが replace によって、素直に入力した文字列で検索できるようになることが期待されます。
ただ2026年7月時点では、 replace は punctuation と並んでどのWebブラウザーでもサポートされていないため、導入は将来への宿題としておきます。
お読みいただきありがとうございました。今後もこうした改善を通じて、読者のみなさまによりよい環境をお届けできればと思います。
- 余談ですが、Unicodeには空白とされる文字が25種類あるのですよね（参考：空白文字 - Wikipedia）。↩
