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

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

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

自分は全く知識がない状態でWebサイト制作を始めたので、改行問題でかなり苦労しました。
 
おそらくWebブラウザのサイズに対する改行対応方法は複数あると想いますが、
現状私は下記のようにメディアクエリを設定して、デスクトップとモバイルでの表示を使い分けています。
 
ただ、この方法だといちいちメディアクエリをCSSに書き込まないといけませんし、めんどくさいと思っていました。
 

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をかけるのでいいですね。
今後もいろんな技術を試してみたいと思います。