日本語の不自然な改行を手っ取り早く自動調整してくれる「BudouX」｜css,js不要

html/cssまたphpを使用したコーディングで

日本語が自動的にきれいに改行されたらめちゃくちゃ楽なのに・・・

一度でもそう思った方はぜひ今回のBudouXを導入しましょう！

レスポンシブコーディングで日本語改行に苦しむ

WEB制作でよくある悩みで日本語が変な場所で改行されてしまう。

パソコンでは見た目が大丈夫でもレスポンシブ対応でのコーディングが近年はデフォルトです。

デバイスによっては意図しない部分で改行されてイライラすることも・・・

<p>こんにちは！改行って面倒ですが読者にとっても運営にとっても非常に大切なことだと思います。</p>

<br>タグで改行調整を試みる

初心者がよくやるのは「改行＝<br>」

<p>こんにちは！<br>改行って面倒ですが<br>読者にとっても運営にとっても非常に大切なことだと思います。</p>

span display:inline-blockで改行調整を試みる

少し上級編でよくある対策としては

<p>こんにちは！<span style="display:inline-block;">改行って面倒ですが</span><span style="display:inline-block;">読者にとっても</span>運営にとっても非常に大切なことだと思います。</p>

「<span style=”display:inline-block;”>」で囲うケース。

しかしイメージと違うことも多々あり結局はメディアクエリを使用しcssで調整する必要があることも多いです。

またサイト内で全テキストをチェックしていくのもかなり大変な作業になります。

できれば放置してしまいたくなります。

BudouXで自動に改行問題を手っ取り早く解決

このブログでは詳しい仕様などは記載しません。

詳しい仕様を知りたいかたはコチラ（GITHUB）を参照ください。

通常のコーディング（html/css)での作業では以下のようになります。

<!-- 目的のテキストを<budoux-ja>で囲う -->
<budoux-ja>
  <p>こんにちは！改行って面倒ですが読者にとっても運営にとっても非常に大切なことだと思います。</p>
</budoux-ja>
<!-- ▼body閉じ直前に記述▼ -->
<script src="https://unpkg.com/budoux/bundle/budoux-ja.min.js"></script>

BudouXの使い方

BudouXの使いかたは

以上です。

ちなみに実行されている時は（ブラウザに表示されている時は）

<budoux-ja>
<p>こんにちは！<wbr>改行って<wbr>面倒ですが<wbr>読者に<wbr>とっても<wbr>運営に<wbr>とっても<wbr>非常に<wbr>大切な<wbr>ことだと<wbr>思います。</p>
</budoux-ja>

自動的に「<wbr>」タグが挿入されています。

<wbr>タグって何？

簡単に言うと<wbr>タグとは改行しても良い箇所に使用するタグです。

少しだけ詳しく言うと

h1{
  word-break: keep-all;
  overflow-wrap: break-word;
}

のcssが適応されます。

しかしBudouXを使用しない際、基本は英単語に適応されるものなのです。

一部分、例えば英語の見出しなどだけで使用するには非常に使い勝手がいいです。

<h2>You<wbr>only<wbr>live<wbr>onece</h2>

改行禁止タグ<nobr>は使えない

逆に改行禁止のタグで<nobr>というのもある、というよりはあったと言う方が正しいでしょう。

現在はサポートされてないので使用は控えましょう。

white-space:nowrapで改行禁止

もし改行禁止の意図で記述したい際は

<span style="white-space:nowrap;">飛び抜けた気持ちがいい爽快感</span>

こうすると改行がされません。

改行されないのでデバイスが狭くなるとデフォルトでははみ出てスクロールされます。

改行はWebデザインにも影響

テキストの改行はWebデザインにも影響する大事なことです。

パソコン画面ではきれいに見えてもスマートフォンでは文字が読みにくかったりすると離脱率が上がってしまいSEOにも悪影響です。

近年は基本的にはデフォルトですがレスポンシブ対応の案件の際は注意して制作していきましょう。