BudouXを使用してタイトルの改行位置を最適化する

GoogleのUXエンジニア飯塚修平さんが作成した、日本語改行問題を解消するためのライブラリ”BudouX“を当ブログに導入してみたので方法を紹介。

このライブラリを使用するといい感じの所で改行することが可能になります。
導入前にイメージを掴みたい方はデモサイトが用意されていますのでそちらをご覧ください。

インストール

npm install budoux

基本的な使い方

文字列をloadDefaultJapaneseParser()のparse()に渡すと文節ごとに区切った配列が返ってくるので、<wbr>や適切なタグで囲んであげたりして利用します。

import { loadDefaultJapaneseParser } from "budoux";

const parser = loadDefaultJapaneseParser();
const array = parser.parse('BudouXを使用してタイトルの改行位置を最適化する');
console.log(array); // ['BudouXを', '使用して', 'タイトルの', '改行位置を', '最適化する']

当ブログでの導入事例

JavaScript

ライブラリはViteのnpm run buildしてできたvendor.***.jsをリネームして読み込んでいます。

import { l as i } from './budoux.js';

const parser = i();
const formatTitle = (titles) => {
	if (!!titles) {
		for (const title of titles) {
			const text = title.textContent;
			const array = parser.parse(text);
			const newTitle = array.join('<wbr />');
			title.innerHTML = newTitle;
		}
	}
};
formatTitle(document.querySelectorAll('.entry-header__title--blog, .blog-card__title > a'));

CSS

.entry-header__title--blog,
.blog-card__title > a {
    overflow-wrap: break-word;
    word-break: break-word;
}