2013-06-25

適切に改行を行う

ブラウザーはviewportによって折り返しを自動で行なってくれるわけだけど、場合によっては適切ではない位置で行われてしまうのをコントロールしたいという話。見出しをセンタリングしているようなケースで幅によっては一文字だけ次の行になってかっこ悪い！　みたいなのを解消したいということであったり、逆にびろ～んと間延びしないようによさそうな位置で改行を入れたいということであったり。一年くらい前にResponsive Line Breaksと呼ばれるようになった。

具体的なものはResponsive Line Breaksにあるデモやこのウェブログの日付表示の部分とかがそれ。ここではviewportの幅が広い時に良い位置で改行が入るようになっている。

article footer br {
  display: none;
}

@media (min-width: 60em) {
  article footer br {
    display: inline;
  }
}

実装はこういった感じの簡単なもの。デフォルトでは一行で表示されるようにしておいて、広い画面では(サイドバー的に横にっひっつくので)よさそうな所で改行が入るようになる。センタリングは使ってないので日本語でデモを作ったが、単語を区切るスペースというものがない日本語により向いていると思えるはず。

Demo: 日本語でResponsive Line Breaks

br要素を使うことの是非みたいなものも当然ある。本来的に必要そうなbr要素ではないので、span要素で固まりを作って擬似要素で改行を挿入してやった方が良い。

@media (min-width: 60em) {
  article footer .rlb::before {
    content: "\000a"; /* Line Feed */
    white-space: pre-line;
  }
}

とかで良いので、そんなに難しくもない。マークアップが煩雑になるみたいな作業的な難点はあるけど。

英文ならばBalanceTextというJavaScriptライブラリがあって、加えて均等割付(text-align: justify)時には行ごとに均等割付になるように単語間の空白が調節されるのではなく、各行の単語量を調節して段落全体で単語間の空白のサイズが一定になるように調節してくれる機能もあったりしてかなりすごい。