Webデザインにおける日本語の改行

皆さん、こんにちは!

LikePayのCTO、セルゲイです。今日は話題の日本語の改行の問題と、その解決策についてお話したいと思います。

以下の画像に表示されている問題はあったことがありますか?

それは一番悪い状態でもないです。たまに一文字だけ改行されることがあります。それは最悪です。

我々は2つの解決策を考えてきました。両方はそれぞれの長所と弱点があります。順番でお話したいと思います。

解決策その1:ラッピング

最初の解決策は、途中で改行されて欲しくない単語をspanのタグでラッピングすることでした。その場合は、このようなソースコードを書きました。

HTMLコード:


<body>  
  <h1>LikePayは</h1>
  <p class="my-awesome-text">
    <span>「SNS×お店」をセットで楽しむ新アプリ。</span>
    <span>お店についてSNSに投稿するだけで、</span>
    <span>お金のように使える</span>
    <span>割引ポイントがもらえる!</span>
  </p>
</body>

そのコードの効果は?今のところは、0です!効果がでるために、spanのタグに特別なスタイルを設定する必要があります。

CSS コード:


<style>
  .word-break > span {
    display: inline-block;
  }
</style>

それによって、何ができたのでしょうか?このスタイルが適用された時点から、span のタグは、同時にblockとinlineの要素のように表示されます。スペースが足りている場合、要素はブロックとして1行に並んでいます。ただ、スペースが足りない場合は、ブロックは全て改行されます。

このようなイメージです。

いいところ は、効果があるということだけです。

悪いところ - слишком 不要のコードが多いですし、ある程度で決まったコードの構成を守る必要があります。そしてspanタグの間にある不要のスペースがある(こちらの対策も本当はあります)。

解決策その2:ソフトな改行

2番目の解決策は、この間新しく考えてきました。まだ実際に我々のサイトやアプリに導入していませんが、この解決策がこの記事を書くきっかけになりました。

この解決策の基礎には、改行しても良さそうなとことでwbrのタグを使用するこちがあります。

もともと、このタグは日本語に適用されていないので、もう一つのスタイルが必要になります。

今回はwebページの基礎の基礎となるbodyのタグに新しいスタイルを適用します。そのおかげで、中にあるすべてのタグに遺伝されます。

HTMLコード:


<body>
  <h1>LikePayは</h1>
  <p>
    「SNS×お店」をセットで楽しむ新アプリ。<wbr/>
    お店についてSNSに投稿するだけで、<wbr/>
    お金のように使える<wbr/>    割引ポイントがもらえる!  </p>
</body>

CSSコード:


<style>
  body {
    word-break: keep-all;
  }
</style>

その結果、望んでいた通りに改行されるようになりました::

いいところ は、綺麗でわかりやすいコードが出来上がります。そして、改行も正しいところにしかされなくなります。

悪いところ は一所懸命考えても思いつかなかった. :-)

最後に

この記事は皆さんに役立つと嬉しいです。質問などがあるましたら、気軽に連絡してください。お待ちしています!