2011年09月29日

Mobile SafariのJavascriptで約物のアキ調整

 商業出版物でも組版ルールがデタラメな末法の世の今日このごろ、組版ハッカーの皆様はいかがお過ごしですか。私は某文庫が縦組みなのに句読点をぶら下げないことに憤っています。おそらくInDesignのデフォルトが縦組みでもJIS X 4051なのが悪い。
 今回のお題は、Mobile SafariのJavascriptで約物のアキ調整。受けのカッコに句読点が続くときにはベタ組、起こしのカッコが続くときには二分アキ、どちらも約物なのにこれはいかに、という問題を解く。
 あらゆる文化と同じく、アキ調整のルールも多分にアドホックなものだが、アドホックなものをすべてカバーしようとすると面倒なので、ほとんどのケースをカバーする簡単なルールを作れないものかと考えた。

 いきなりだが結論。
 
1. 約物のグリフは全角とする
2. 文字にはデフォルトのアキが前後に設定されている、と考える
 受けのカッコなら後ろに二分アキ、中黒なら前後にそれぞれ四分アキがデフォルトで設定されている、と考える。漢字ひらがなカタカナでは、前後ともデフォルトのアキ量はゼロだと考える。
 
3. 文字には「吸着性」のものとそうでないものの2種類がある、と考える
 約物はたいてい吸着性であり、漢字ひらがなカタカナはすべて吸着性ではない。
 吸着性ではあるが約物かどうか定かでない文字として、全角空白がある。約物ではあるが吸着性でない文字として、繰返し記号がある。
 吸着性でない文字はすべて前後ともデフォルトのアキ量がゼロである。逆は真ではなく、前後ともデフォルトのアキ量がゼロだが吸着性の文字として、全角ダッシュがある。
 
4. 前後の文字が両方とも吸着性であれば、その文字間のアキは、前後の文字のデフォルトのアキ量のうち小さいほうだけを残し、大きいほうは捨てる
 受けのカッコに句読点が続くときを考えよう。受けのカッコはデフォルトでは後ろに二分アキで、句読点の前にはデフォルトのアキはない。0.5と0で、小さい方は0、つまり受けのカッコに句読点が続くときはベタ組となる。
 受けのカッコに起こしのカッコが続くときはどうか。起こしのカッコは前に二分アキだから、0.5と0.5で、今度は二分アキとなる。
 
5. 行頭・行末にアキがきたときには、そのアキは捨てる
 つまり行頭は常にベタ組する。
 
 以上。
 キーになるのは文字の「吸着性」という概念である。この概念を導入することで、ほとんどの場合を十分美しくカバーできる。
 
 実装はどうなるのか。
 グリフからデフォルトのアキを削るのは簡単で、span要素でCSSのmarginをつければいい。
 行頭のアキを捨てるため、半角空白をアキに使う。アキ量の調整としてspan要素でCSSのletter-spacingをつける。
 ただし、常にアキを半角空白にしていると、行頭・行末の禁則が崩れるので、禁則が絡む場合は文字のmarginだけで調整する。
 行末が揃わないのはWebkitなのでどうしようもない。CSS3のtext-justifyの実装待ち。
 あと、画面が小さいので節約のため句読点をぶら下げにした。
 ほぼiPhoneとAndroid専用

Posted by hajime at 2011年09月29日 15:21