どうも、レーウィンですよ。
すんごいふわっとしたけど、テキストを良い感じに改行するテクニック。
日本語はいい感じに改行してくれない・・・
英語って単語毎に改行してくれるんですよ。単語の途中で改行されることは、cssで設定しない限りはないです。
ただ、日本語に関しては単語とか一切関係なしに改行しちゃうんですよね。
なんなら、最後の「。」だけ改行されちゃうこともあります。DTPやってる人からすると鳥肌ものですね。
これの何がよくないかっていうと可読性ですね。
例えば、「有言実行」って言葉ありますよね。これって普通に並んでみたら普通ですが
「有(ここで改行)言実行」
とかされると急に可読性悪くなります。
まあ、これは少し極端な例ですが、こういったことが起こりうるというわけです。
spanタグとinline-blockを使って改行を良い感じにしよう
今から１つの文章を書きます。
「WebデザイナーにとってPhotoshopは切っても離せないツールです。とはいえど、Photoshopがベストなデザインツールなのかというと、現状では最適というだけでベストとは言いがたいところはあります。」
どうですかね。画面のサイズいろいろいじってみても上のテキストは良い感じに改行してくれると思います。
これのソースはこんな感じです。（わかりやすく改行しています）
<span style="display: inline-block">Webデザイナーにとって</span> <span style="display: inline-block">Photoshopは</span> <span style="display: inline-block">切っても離せない</span> <span style="display: inline-block">ツールです。</span> <span style="display: inline-block">とはいえど、</span> <span style="display: inline-block">Photoshopが</span> <span style="display: inline-block">ベストな</span> <span style="display: inline-block">デザインツール</span> <span style="display: inline-block">なのか</span> <span style="display: inline-block">というと、</span> <span style="display: inline-block">現状では最適というだけで</span> <span style="display: inline-block">ベストとは</span> <span style="display: inline-block">言いがたいところは</span> <span style="display: inline-block">あります。</span>
改行したくない塊毎にspanタグで囲み、それをinline-blockにすることで良い感じに改行してくれます。
とはいえど、正直すごくめんどくさい作業なので、極力やりたくないですね・・・。
せめてPug使わないとやってられないかも。Pugについてはいつか記事書きます。
ではでは。