自動でいい感じに改行を行ってくれる「BudouX」をWraptasに導入してみた!
こんにちは!
プロトアウトスタジオ運営の須那です。
少し前の話題ですが、日本語の改行を自然で読みやすいように行ってくれる軽量な分かち書き器「BudouX」をGoogleが公開したとして話題になりました。
今回はそのBudouXをWraptasに組み込んで、Webサイトの改行を自動化してみましたので、メモ的にここに残しておきます。
BudouXを導入してみた
BudouXとは冒頭でも触れましたが、自動でディスプレイサイズに合わせて自然な改行が行える分かち書き器です!
BudouXはHTML + JSで実装できるので、導入してみました。
実装自体はかなり簡単で、まずは下記のコードを直接書き込みます。
これであとはnotionにHTMLで文章を書く際に、自動で改行処理を当てたい場所を <budoux-ja></budoux-ja> タグで囲むだけです。
そうすると下の図のようにディスプレイサイズに合わせて改行を自動で行ってくれます。
超簡単ですね!
とりあえず、これでいちいち改行位置を気にして、メディアクエリを対応させる必要がなくなりました。
すごいね、BudouX
普通にnotionに記載した文章には適応されない
当然ですがBudouXを適応させるには <budoux-ja></budoux-ja> タグで囲む必要があるので、HTMLで書いた文章にしか適応できません。
本来であれば、そのままnotionに記入した文章にも適応させたいところですがそこは仕方ないですね。
h1,h2,h3ぐらいまではHTMLで記載して、BudouXを適応させるぐらいがちょうど良さそうです。
一旦簡単なtipsとして書いてみました!
WraptasはHTML、CSS、JavaScriptをかけるのでいいですね。
今後もいろんな技術を試してみたいと思います。
他の記事もいかがでしょうか?
新着記事
人気記事