word-break: break-all

word-b/reak: break-a/ll;

英単語の間であっても自動改行されるように、word-breakプロパティーでbreak-allを採用しているウェブサイトが地味に増えているような印象だ。コスメティックな理由で見出しやサムネイルの付記などに使うのは悪くない妥協だと思うが、本文にもわりと気軽に使われていてかなり気になる。

日本語では特に単語の切れ目という論理的な箇所は存在せず、ブラウザーではどこでも自動改行される。せいぜい句読点が行頭にならないように制御されるくらいだ。word-breakプロパティーではこの自動改行における単語の禁則処理を制御できる。値としてbreak-allを指定すると禁則処理が解除され、現在のブラウザーの実装では以下のような事象が起こる。

前者がわかりやすく、これを目的としていることが多い。こうすることによってタイポグラフィーでいうところのflush left (ragged right)を解消でき、文字のおさまりがよくなるというわけだ。text-align: justifyが英語交じりの日本語で想定通りに動かない(意図しない大きな空白が生まれてしまう)こととそれと組み合わされるべきhyphensプロパティーのきちんとした実装が進んでいないことから、現実としては両端を揃える唯一の手段ということになる(なっている)。

単語間で改行を許可されるということは、その単語が意図しないところで分断されるということなので、可読性を著しく阻害する。“justify”と書いたのにも関わらず、“just”で分断されていたら読み違えることがあるだろう。また、そういう意図しないところで改行される文章だと知った後は、そのことを意識しながら文章を読む必要が出てきてしまう。

この問題を解決するにはハイフネーションが必要になるが、上述したようにこの機能を提供するhyphensプロパティーの実装は進んでおらず、限られたブラウザーの限られた言語のページでしか想定通りに動くことはない。もしこの単語の分断が可読性に影響を与えないのならば、hyphensプロパティーでハイフネーションを提供しつつその実装を待つという態度も許されるだろうが、実際には著しく影響を与える。事実上使いものにならない(プログレッシブ・エンハンスメントにならない)と言って良いだろう。

もう一つは記号(句読点など)が行頭に来てしまう問題だ。Internet Explorer 11では起こらないが、Chrome 34やFirefox 29では起こる。こちらは可読性にはあまり影響を与えることはないが、その一方でその見た目に大きな影響を与える。単語間で改行させることによっておさまりの良さを得ようとしたのにも関わらず、グリフが小さい記号が行頭に来てしまうことによってその意図は達成できなくなる。本末転倒と言えるだろう。


word-break: break-allに一定の効果はあることは確かだが、本文で気軽に使えるようなものではない。矩形を強く意識させたい、そして主に読まれるのではなくスキャンされるような特殊なウィジェットのみでの利用に限るのが良い。本文のおさまりの良さは、text-align: justifyhyphens: autoの組み合わせが気軽に使えるようになるまで気長に待つしかないだろう。