改行を間違うと悲しい
webサイトでよくあるのが、妙な所で改行が入ること。例えば以下の様に、変な所で改行が入ると悲しい。これは過去にあった実例。
「リチャード・クレイダーマンコ
ンテスト」
伝統あるピアノコンテストが台無しだ。
ネットで見かけた対策
そこでinline-blockを指定した<span>タグで切られたくない単語を囲むと良いよというネタを見かけたのだが。なんか行末がガタガタして格好悪い。このガタガタを直すCSSがtext-align: justify;なのだが、inline-blockでぶつ切りにしてるので効かない。
Justifyが使える改良案
いくつか試した結果inline-blockではなく、white-space: nowrapを指定した<span>タグで囲めばうまく行くのに気が付いたので、試した。実際にはchrome/IEが<span>タグの連続は改行なしというルールがあるので、<wbr>タグを挟んでいる。
(Firefox,IE11,chrome,safariでは確認したが、iPhone等では未確認)
雑誌で見るような流し込み結果になった。これで一安心だが、全部の区切りを手入力すると大変なので、Tingy-segmenterという分かち書きjsをつかって、自動で区切りを判定できるようにした。
使い方
ソースをコピペして、文章を適当に<p>や<div>で囲んでclassに「jas」を追加するだけでよい。ちなみに、ニーズがあるか不明だが<button>に長い文章を入れたい時も有効に使える。
デモページ: http://akirayou.net/jas.html