BudouXをご存じだろうか。
極力短い言葉で説明すると「機械学習を用いて日本語や中国語の文章に自動でWBR要素を挿入するプログラム」だ。 *1
筆者は先日Google Developers Japanのブログに掲載された紹介記事を見て知った。
これは試さずにはいられなかったのだが、そもそも筆者は文章の改行について「何も指定しないとURLが要素をはみ出てしまう場合があるのでword-break: break-all;を指定する」程度の雑な認識しかしていなかった。
そのため適切な指定について一度しっかり確認する必要が有ると思い、簡単な検証用のページ（https://crabspider.pages.dev/line-break-test/）を作成した。
普通にHTMLを書いた場合
何も指定しないとURL中に含まれる長いID等が長大な単語と認識されてしまい、自動改行の対象外となり文字列が要素からはみ出てしまう場合が有る。そのため何らかの対策は必須。
word-break: break-all;、line-break: anywhere;、overflow-wrap: anywhere; のいずれか一つでも指定すればこれは回避出来るが、どの指定にも短所が有る。
word-break: break-all;かline-break: anywhere;を指定するとURLが綺麗に改行されるようになるが、「CSS」のような短い単語の途中でも改行が入ってしまうようになるため読みづらくなってしまう。
overflow-wrap: anywhere;では「CSS」のような単語の途中で改行が入る事が無くなるが、それがURL内にも適用されてしまうので妙な余白を残した改行になり見栄えが悪い。
しかし、実際はこのような問題を起こす文字列はURLや何らかのコード等以外ではほぼ無いと考えられるため、文全体とは無関係に個別の要素で対応する事が可能だと思う。
例えばリンクの場合、https://で始まる文字列の場合のみ、a要素にword-break: break-all;等が指定されるようにすれば済む話だ。
言ってみれば、普通の文章自体には特に何も指定しなくても大きな問題は無さそうだ。
強いて言うなら念のためにoverflow-wrapは指定した方が良いかも知れない。
BudouXを使用した場合
BudouXのCLIをHTML出力モードで実行すると次のようなHTMLが返って来る。
budoux -H 改行のテスト <span style="word-break: keep-all; overflow-wrap: anywhere;">改行の<wbr>テスト</span>
今回はこのspanについては削って張り付けてあるため、これと同様の表示を検証したければフォームでword-break: keep-all; overflow-wrap: anywhere;を指定する必要が有る。
実際にその指定にしてみると、日本語の文章も単語の途中で改行されなくなる事が確認できた。 URLについては不自然な改行になるが、これは普通のHTML同様、リンクは別途対応するようにすれば解決するだろう。
結論
個人的な印象としては、本気で文章の読みやすいサイトを作りたい場合、BudouXを使用した上で文章全体にword-break: keep-all; overflow-wrap: anywhere;、お好みでtext-align: justify;を指定。URLがリンク文字列として指定されているリンクにはword-break: break-all;なりを付与しておくのが良いのではないかと感じた。
Chrome119以降、word-break: auto-phrase;を指定するとBudouXを用いた処理が行われるようになるとの話だが、Cloudflareによると日本ではSafariのシェアが30%前後有るため、これを考慮すると自前でBudouXを通す必要が有るだろう。
*1:ウェブブラウザ以外でも使えるので、この説明はかなり端折っている
