文字組デザインを行う上で重要となる改行位置。
印刷媒体では掲載するスペースに応じて文字数やカーニングの調節、禁則処理を設定したりしてイイ感じの改行位置になるよう普段から当たり前に行っていると思います。
しかし、Webでは幅に応じてベストな改行位置が変わってきてしまうため調整が難しくなります。
レスポンシブに対応したきれいな改行を行うことは技術的に可能ではありますが、数が多い場合はどうしても工数がかさんでしまうため納期や予算が少ない案件では導入しにくいという状態になっています。
(納期や予算があっても完璧に設定されているサイトは少ないです)
ですが、「BudouX」というJSライブラリを使用することで、簡単にレスポンシブ改行が行えるようになります。
そんな夢の技術を持つライブラリ「BudouX」についての概要や使い方について紹介していきます。
BudouXとは

BudouXとは、幅に応じた文字の改行を自動で行ってくれるライブラリ。JavaScriptとPythonでサポートされています。
このBudouXを使用すると、文章に応じてイイ感じに自動で改行という夢の技術が手に入ります。
開発したのはGoogleのUXエンジニア飯塚修平さん。日本人が作成したためデフォルトでサポートしている言語が日本語となっています。こういった言語にかかわるライブラリは、日本語のサポートまで時間を要したり、別でライブラリを導入せねばならないことが多いため、最初から対応しているのは嬉しいですね。
従来の一般的な改行方法
BudouXのすごさを語る前に一般的な改行方法について軽くおさらいします。
普段コーディング行っている方には常識の内容なため、飛ばしてもらって構いません。
brで指定
<p>どうもはじめまして、私の名前はゴンザレス・たかしです。<br>組織のボスである貴様に復讐するため、あの世から舞い戻ってきた。</p>
一番シンプルな改行方法。
スマホの時は改行したくない場合は、brをdisplay:none;
すれば、改行が消せます。
しかし、brだけで幅に応じた細かいレスポンシブ調整を行おうとすると、改行箇所に応じてclassやCSSのメディアクエリを指定していかねばならなくなることも多いため、使い勝手があまり良くない。
inline-blockで指定
<p><span>どうもはじめまして、</span><span>私の名前はゴンザレス・たかしです。</span><span>組織のボスである貴様に復讐するため、</span><span>あの世から舞い戻ってきた。</span></p>
この方法では、全文字表示できる状態であれば全文字表示され、すべて表示できない場合はタグで囲んでおいた部分で改行される。
幅に応じた改行でレスポンシブのCSS指定が最小限にできるため便利ですが、数が多いとHTMLの作業工数が大きくなってしまいます。
BudouXの使い方
Node.js CLIを使用する方法もありますが、ゴリゴリのエンジニアでない方にとって分かりにくくハードルが高いです。
ですが、ご安心ください。Web Componentを使用したもっと簡単なやり方がございます。
budoux-ja.min.jsを読み込む
まずはCDNで配布されているbudoux-ja.min.jsを読み込みます。
12KBだけの軽量ライブラリなのもうれしい。
<script src="https://unpkg.com/budoux/bundle/budoux-ja.min.js"></script>
budouxタグで囲む
自動改行されてほしい文章を「 budouxタグ 」で囲みます。
終わりです。ヤッター。
<budoux-ja>
どうもはじめまして、私の名前はゴンザレス・たかしです。組織のボスである貴様に復讐するため、あの世から舞い戻ってきた。
</budoux-ja>
Web Componentのサポート状況について

モダンブラウザは対応済みです。
コメント