2015-09-30

1文字だけの改行の拒否

日本語の文章では任意の位置で改行できるため、レスポンシブ・ウェブ・デザインでは多くの場合、望まない位置での改行が起きる。例えば最後の1文字だけ次の行になってしまうと、読みやすさや理解度に致命的な影響を与える。例えば「？」だけ次の行に送られた場合、あるとないのでは大きく印象が変わるだろう。Twitterで@Takazudoと@oosugi20の会話を見て、やはりみな似たようなことは考えるものだと感じ、このあたりのことについて書いてみたくなった。

僕はjQueryで最後の五文字では改行が起きないようにいじったりしていた(うろ覚えで書いたもので、実際にはもっと複雑にやっていたと思う)。見出しがテキストのみの場合、最後の数文字の間に非改行ゼロ幅スペース(U+FEFF)を仕込むことで、その間で改行が起こらなくなるという仕組みだ。ここでは比較のためにクラスで判定するように書いてあるが、実際にはh1からh6を全部処理してやれば良いので、見出しにクラスを振る必要はない。

こういった文字レベルでのレイアウト(例えばfont-feature-settingプロパティーを使ったカーニングの適用)は、タイポグラフィーの中でもリーダビリティーという点でより重要度が上がっている。少し観点は違うが、AdobeがBalanced-textという名前でうまいことバランスをとって改行されるようにするjQueryプラグインをリリースしているのも、そのあらわれと言えそうだ。

CSS Text Module Level 4ではtext-wrapプロパティ－でbalanceを指定すると、なんとなくうまく改行してくれるようになる予定だ。またこのモジュールでは行の最低文字数などを指定するプロパティーを作るかもしれない(これがあれば上記のjQueryスクリプトと同じことがCSSだけで簡単に実現できるようになる)ようなことに触れられてもおり、いずれも実装が楽しみだ。後者は相当プライオリティーが低そうなので、いつになることやら……という気はするが。

そこまでして改行位置を調整してやる価値はあるのか、と問われると、絶対にある。編集作業では当たり前のように行われているであろう見出しのレイアウトに応じた調節を自動化することで、より正確で誤解を与えない見出しを追求できるはずだからだ。それはコンテンツのクオリティーに直結する。コンテンツ・ファーストのウェブデザインとはそういうことなのではないだろうか。