日本語の文章の場合、両端が揃っているとおさまりが良い。CSSではその両端揃えを行うためにtext-alignプロパティーにjustifyという値が用意されている。完全に日本語だけの段落ならほぼ100%、和欧混在の段落でも9割以上の段落で想定通り機能するが、まれに無残な結果になる。それは自動折り返しで長めの英単語が行頭に来る場合だ。
両端揃えは文字と文字の間を開けることで行われる。日本語だけの段落の場合、ほとんどどこでも改行することができる上、行送りの禁則処理が起こっても最大2文字分なので、行の長さが十分にあればその調整は認識されないだろう。問題は和欧混在の段落だ。
Demo: Justifying Problem
この「contemporary」くらいの長さの単語だとまだマシな方で、あまり問題が起こることはない。しかし、このウェブサイトのようにcompareDocumentPosition()とかDOCUMENT_POSITION_CONTAINSなどといった途中で改行できない長い語がよく出てくると、こういった問題は発生しやすくなる。
「contemporary」という多少長めの単語が行頭に来るとその前の行でトラッキングが狂ってしまっている。デモは環境によって再現しないかもしれないが、掲載しておいたスクリーンショットのようになる環境は少なくない。ほとんどのブラウザーで、メイリオや游ゴシック、ヒラギノ明朝で表示された場合再現するはずだ。
以下の2つの方法以外では解決できない(と思う)。
- 全角の英数字を使う
word-break: break-allを使う
間違いなく1を採用するのは馬鹿げているので、現実的な解は2ということになる。break-allはこの両端揃えでおかしくなるのは防ぐが、それと同時に他の場所にも顕著な影響を与えてしまう。どちらもあまり良い解ではない。
このウェブサイトではhyphensプロパティーの柔軟な実装を期待する形で両端揃えを試しつつ、code要素などのみで単語中で折り返せるようにした。これで95%くらいのケースでうまくいくはずだがどうだろうか。8文字以上の長い単語を自動で折り返せるようにするスクリプトでも書けば98%くらいまで解決できそうだが、コストに見合わないのでやめておいた。
本当はここでハイフネーションができれば良い形で解決するのだが、Chromeではまだhyphensプロパティーが実装されていない。しかし最近作られたイシューはあったので、ちょっと期待できそうになってきた。そのため現状の両端揃えにおける問題点には目を瞑って、hyphens: autoを併用するというのも悪くはなさそうだが、lang=jaだとハイフネーションが機能しないというまた別の問題もある。前途多難だ。