自動でいい感じに改行を行ってくれる「BudouX」をWraptasに導入してみた！

2023/10/22 9:062024/2/17 10:16

こんにちは！

プロトアウトスタジオ運営の須那です。

少し前の話題ですが、日本語の改行を自然で読みやすいように行ってくれる軽量な分かち書き器「BudouX」をGoogleが公開したとして話題になりました。

今回はそのBudouXをWraptasに組み込んで、Webサイトの改行を自動化してみましたので、メモ的にここに残しておきます。

そもそも普段はどうやっているの？

自分は全く知識がない状態でWebサイト制作を始めたので、改行問題でかなり苦労しました。

おそらくWebブラウザのサイズに対する改行対応方法は複数あると想いますが、

現状私は下記のようにメディアクエリを設定して、デスクトップとモバイルでの表示を使い分けています。

ただ、この方法だといちいちメディアクエリをCSSに書き込まないといけませんし、めんどくさいと思っていました。

BudouXとは冒頭でも触れましたが、自動でディスプレイサイズに合わせて自然な改行が行える分かち書き器です！

BudouXはHTML + JSで実装できるので、導入してみました。

実装自体はかなり簡単で、まずは下記のコードを直接書き込みます。

これであとはnotionにHTMLで文章を書く際に、自動で改行処理を当てたい場所を <budoux-ja></budoux-ja> タグで囲むだけです。

そうすると下の図のようにディスプレイサイズに合わせて改行を自動で行ってくれます。

超簡単ですね！

とりあえず、これでいちいち改行位置を気にして、メディアクエリを対応させる必要がなくなりました。

すごいね、BudouX

当然ですがBudouXを適応させるには <budoux-ja></budoux-ja> タグで囲む必要があるので、HTMLで書いた文章にしか適応できません。

本来であれば、そのままnotionに記入した文章にも適応させたいところですがそこは仕方ないですね。

h1,h2,h3ぐらいまではHTMLで記載して、BudouXを適応させるぐらいがちょうど良さそうです。

一旦簡単なtipsとして書いてみました！

WraptasはHTML、CSS、JavaScriptをかけるのでいいですね。

今後もいろんな技術を試してみたいと思います。

💡

他の記事もいかがでしょうか？

新着記事