text-spacingが待ち遠しい

text-spacing

これがまさに日英数が混在する文章で、英語や数字と日本語の間に4分の1スペースを自動で追加したり、全角括弧で生じる大きなスペースをトリムしたりできるプロパティです。

text-spacingは元々text-trimとtext-autospaceという別々のプロパティを統合したものです。これは2011年9月1日版のチェンジログに載っています。
統合に至る経緯の簡単な説明も見ておくと面白いかもしれません。

このプロパティは「CSS Text Module Level 3」にあったんですが、2012年1月19日版で削除され、「CSS Text Level 4」に移されました。

2013年9月現在、このプロパティを実装しているブラウザは残念ながらありません。
ですが、予習としてプロパティの値を簡単にまとめてみます。
詳しいことは仕様を見たほうが確実です（括弧はどの文字のことなのか、とか……）。

構文は次のようになっています。

normal | none |
[ trim-start | space-start ] ||
[ trim-end | space-end | allow-end ] ||
[ trim-adjacent | space-adjacent ] ||
no-compress || ideograph-alpha || ideograph-numeric || punctuation

normal, noneの場合は、そのキーワードのみを指定できます。それ以外の場合は次のものを順不同で少なくとも1つは指定。

• trim-startとspace-startのどれか1つ
• trim-endとspace-endとallow-endのどれか1つ
• trim-adjacentとspace-adjacentのどれか1つ
• no-compress
• ideograph-alpha
• ideograph-numeric
• punctuation

normal

基本動作。space-start allow-end trim-adjacentと同等。

none

text-spacingによる見た目を全て無効にする。全角文字は全角幅グリフとしてセットされる。

space-start

行頭にある全角開き括弧を全角幅グリフとしてセットする（全角括弧の半分の空白スペースをそのままにする）。

trim-start

行頭にある全角開き括弧を半角幅グリフとしてセットする（全角括弧の半分の空白スペースをトリムする）。

space-end

行末にある全角閉じ括弧を全角幅グリフとしてセットする。

trim-end

行末にある全角閉じ括弧を半角幅グリフとしてセットする。

allow-end

行末揃えする以外に収まらない場合、行末にある全角閉じ括弧を半角幅グリフとしてセットする。そうでなければ括弧を全角幅グリフとしてセットする。

space-adjacent

行頭ではない全角開き括弧、行末ではない全角閉じ括弧を全角幅グリフとしてセットする。

trim-adjacent

約物間のスペースを折りたたむ。詳細はこちらから。

ideograph-alpha

表意文字と非表意文字との間に1/4em分のおまけスペースを作成する。

ideograph-numeric

表意文字と非表意数字グリフとの間に1/4em分のおまけスペースを作成する。

punctuation

言語固有の表記規則によって必要とされる、句読点の周りの改行禁止おまけスペースを作成する。現在のところフランス語でのみ有効だが、将来的には他の言語の規則も追加される可能性がある。

no-compress

テキストの間隔を圧縮しない場合があります……と書かれています。詳しいことは『日本語組版処理の要件』の「行の調整処理」を見るといいでしょう。

「いま使えないんじゃーねー」という方もいるかと思いますが、英数と日本語の間のスペースを調整するだけなら、古くからInternet Explorerがtext-autospaceを実装していますので、text-autospaceについても。

text-autospace

-ms-text-autospaceで指定します。
ただ、元はIEの独自実装だか先行実装だかで、IE 7以下では-ms-なしにする必要があります。

仕様はMSDNの「-ms-text-autospace property (Internet Explorer)」をどうぞ。
W3Cにあるものだと1999年の「International Layout in CSS」にあるものが一番古いんでしょうか。

none | ideograph-alpha || ideograph-numeric || ideograph-parenthesis || ideograph-space

text-spacingの元なので、指定できる値は似ています。

none

初期値。特に何も行わず、おまけスペースなども追加されません。

ideograph-alpha

表意文字と非表意文字との間におまけスペースを追加します。

ideograph-numeric

表意文字と数字との間におまけスペースを追加します。

ideograph-parenthesis

表意文字と半角括弧との間におまけスペースを追加します。

ideograph-space

表意文字と表意文字との間にある半角スペースの幅を広げます。

デモページを作ってみたのでInternet Explorerで見てみてください。

-ms-text-autospace

ちゃんと表示されていれば次のようになります。

半角スペースを手動入力することによって、音声読み上げソフトの読み上げがおかしくなる可能性も考えると、こうやって見た目だけ調整してくれるのは本当に素晴らしいですね。