text-spacing が待ち遠しい

Category : CSS

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

そこで「それ 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実験小屋

Leave a Reply