軽量分かち書き器 BudouX

Googleが開発しているBudouXを使うと、日本語のテキストに分かち書きできる。

<script src="https://unpkg.com/budoux/bundle/budoux-ja.min.js"></script>

<budoux-ja>その後、BudouX により折り返し処理を適用したい文字列を budoux-ja カスタム要素に渡すと、自動でテキスト折り返しを整えるためのマークアップが Shadow Root に挿入されます。</budoux-ja>

↓

#shadow-root
<span style="word-break: keep-all; overflow-wrap: anywhere;">その後、<wbr>BudouX に<wbr>より<wbr>折り返し処理を<wbr>適用したい<wbr>文字列を<wbr> budoux-ja カスタム要素に<wbr>渡すと、<wbr>自動で<wbr>テキスト折り返しを<wbr>整える<wbr>ための<wbr>マークアップが<wbr> Shadow Root に<wbr>挿入されます。</span>

`word-break: auto-phrase`

Chrome 119以降ではlang属性がjaで指定された要素について、CSSでword-break: auto-phraseと指定された部分がBudouXによって分節区切りで折り返されるようになります。 https://developers-jp.googleblog.com/2023/09/budoux-adobe.html

<html lang="ja">
  <p style="word-break: auto-phrase;>...</p>
</html>

デモ

その後、BudouX により折り返し処理を適用したい文字列を budoux-ja カスタム要素に渡すと、自動でテキスト折り返しを整えるためのマークアップが Shadow Root に挿入されます。