Unformed Building

text-spacingが待ち遠しい

公開:
更新:

パーマリンク

日本語文中の英数で日本語の文字との間に半角スペースを入れるか入れないかという話があります。検索すると色々議論されていたりして面白いです。
このブログでは場所によって半角スペースを入れたり入れなかったりしていますが(2020年1月追記:現在は入れていません)、『日本語組版処理の要件』に合わせてユーザーエージェントがいい感じに処理してほしいなーとか思います。

そこで「それCSSでできるよ」と言える(ようになるかもしれない)プロパティを紹介してみます。

text-spacing

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

text-spacingは元々text-trimtext-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-startspace-startのどれか1つ
  • trim-endspace-endallow-endのどれか1つ
  • trim-adjacentspace-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

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

text-autospaceデモのスクリーンショット

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

text-spacingがLevel 4になったので好きに使えるようになるのはまだまだ先な気がしますが、他にもhanging-punctuationtext-justifyなどを使ってウェブページ上でも好みの文字組みができるようになることを考えると今から楽しみになりませんか?

参考リンク:
-ms-text-autospace;文字間の間隔制御 - CSS3ウェブブラウザ実装メモ - 血統の森 web実験小屋