CSSの新しい国際化機能、対応ブラウザ状況は?
2023年12月、CSS に 4 つの新しい国際化機能を導入 | Blog | Chrome for Developersで、CSSの3つの新しいプロパティが話題になりました。あれから1年あまり……。主要ブラウザのサポート状況はどうなっているのか、調査しました。
word-break:auto-phrase
-
概要:CSSの
word-break: auto-phrase
で、文節ごとの折り返しが可能になりました。 - 詳細:https://developer.mozilla.org/ja/docs/Web/CSS/word-break
- 堅牢性:このプロパティ値は実験段階(experimental)のため将来動作が変わるかもしれません(実験段階の定義はMDN参照)。
ブラウザ | サポート状況(2025年2月時点) |
---|---|
Chrome | 対応済み |
Edge | 対応済み |
Safari | ×(試験運用中[1]) |
Firefox | × |
Chrome Android版 | 対応済み |
Safari iOS版 | × |
このプロパティが活躍できる場は、ブログの見出しやテーブルのセルなどいくつもあります。「中途半端なところで改行されたくない」というときが使いどころです。また、個人的な感想になりますが、この設定がされていると、長めの文章の理解速度がとても速かったです。
text-autospace プロパティ
-
概要:CSSの
text-autospace
プロパティで、日本語のなどの文字と英数字の間にスペースを入れるかどうかを設定できるようになります。-
text-autospace: no-autospace
:設定なし -
text-autospace: normal
:スペース(通常のスペースよりも小さい)が入る
-
- 詳細:https://drafts.csswg.org/css-text-4/#text-autospace-property
- 堅牢性:このプロパティは実験段階(experimental)のため将来動作が変わるかもしれません。
-
デフォルト値:Chromeは
normal
、Safariはno-autospace
。
ブラウザ | サポート状況(2025年2月時点) |
---|---|
Chrome | ×(試験運用中[2]) |
Edge | × |
Safari | ×(Safari TP 210で実装されたためいずれ利用可能) |
Firefox | × |
Chrome Android版 | × |
Safari iOS版 | × |
スペースの大きさは全角の8分の1です。正確には「水」という漢字の幅の8分の1です。この機能、Microsoft Wordなどをよく使う方であれば見慣れた機能だと思います。逆にウェブに慣れている人がWordを触ると「なんで空白ができるんだ!?」と思うことも多かったのではないでしょうか。元をたどれば紙の印刷の名残りで四分アキ(文字の4分の1)を入れることが多かったためです。ウェブの仕様では “CSS uses 1/8ic in order to be conservative in its interference” とあるように8分の1の大きさのスペースが空きます。4分の1ではないのは、レイアウトへの影響などがあるそうです。たしかにウェブを見慣れている側からするとこのくらいがちょうどいいのかもしれません。
主要ブラウザで実装されるのはまだ先かもしれません。しかし、いざそうなったとき、英数字と日本語の間のスペースを「手動で空白文字を入れる」「ブラウザに任せて空白文字は入れない」のどちらかの方針を取る必要がありそうです。
text-spacing-trim プロパティ
-
概要:CSSの
text-spacing-trim
プロパティで、約物(句読点や括弧など)とそれ以外の文字との間のスペースを設定できるようになります。日本語のほかに中国語や韓国語などの約物です。-
text-spacing-trim: normal
:約物が隣り合わせのときにスペースを削除 -
text-spacing-trim: space-all
:スペースを削除しない -
text-spacing-trim: space-first
:normal
にプラスして2行目以降の行頭のスペースも削除 -
text-spacing-trim: trim-start
:normal
にプラスして行頭のスペースも削除
-
- 詳細:https://developer.mozilla.org/ja/docs/Web/CSS/text-spacing-trim
- 堅牢性:このプロパティは実験段階(experimental)のため将来動作が変わるかもしれません。
-
デフォルト値:Chrome(つまりおそらくBlink系)は
normal
。
ブラウザ | サポート状況(2025年2月時点) |
---|---|
Chrome | 対応済み |
Edge | 対応済み |
Safari | ×(試験運用中[3]) |
Firefox | × |
Chrome Android版 | 対応済み |
Safari iOS版 | × |
個人的にオススメの設定は text-spacing-trim: trim-start
です。理由は2つで「慣習」「審美性」の観点からですが、いったん背景を説明します。
もともとこのスペースの話も、活版印刷の組版時代までさかのぼります。約物は通常半分の幅でした。その約物と他の文字を並べるとき、込物(スペース)も一緒に入れていました。込物も様々な幅がありますが、通常は半分の幅である二分アキを入れますが、行頭などに括弧が来る場合は込物なしでそのまま組むこともあったわけです。調整するためには半分の大きさにしておいたほうが使い勝手がよかったわけです。しかし、コンピューターが登場し、文字を符号として取り扱う上で込物を分ける概念が消失しました。込物(スペース)とセットで約物を使うようになりました。そういう背景があり、WordやinDesignなどの処理系の責務として、スペースをどうするか決めるようになりました。しかし、ウェブを表示する処理系(ウェブブラウザ)は現在までそういったことをしてこなかったのです。
「慣習」の観点に戻ります。ウェブの文章は通常は段落を「字下げ」しません。印刷物でも段落の最初を字下げしない場合があります。そのときに括弧が先頭にくるなら二分アキ(space-first
)派とアキを入れない(trim-start
)派が存在します。どちらの立場であっても少なくとも2行目以降は通常はスペースを入れないことが多いのではないかなと思います。ですので normal
と space-all
の選択肢が消えます。
段落の始まりを字下げしていない場合、二分アキを入れるときと入れないときの事例。二行目以降はアキがない
「審美性」の観点でいうと、見た目を揃えたい場合が多いためです。実際に長年ウェブのデザインをしていて「見出しの最初の括弧の空白を消したい!」という場面に多く遭遇します。font-feature-settings: "palt"
も代替案としてありましたが、狭くしてほしくないところまで狭くしてしまいます。
まとめ
- 新しいテキストまわりのCSSプロパティは主要ブラウザすべてではないが対応してきている。
- ブラウザが対応すると見た目が変わってしまう。そうなると困る場合もあると思うので、いまから設定しておくのがよさそう。
- 特に
text-autospace
とtext-spacing-trim
は美しさの観点から対応しておくのがよさそう。あって困るものではない(逆にいうとなくてもそんなに困らないが)。 - 実験段階であるため、ここに書いている仕様はや実装方法は変わる可能性がある。
Discussion