お問い合わせ
Carlos Lastres2,419字

Web の日本語の改行をきれいにする方法

日本語は単語の間にスペースを入れないので、ブラウザはほぼどの 2 文字の間でも改行します。見出しが単語の途中で切れないようにするには、lang="ja" を指定して word-break: auto-phrase を使います。Chrome はバージョン 119 から対応しています。Safari と Firefox では、短い見出しに手で <wbr> を入れるか、Chrome と同じ文節エンジンである Google の BudouX を使います。

私は東京で、日本語、英語、スペイン語、中国語のサイトをデザインし、作っています。日本語の読み手が、そのサイトが丁寧に作られたかどうかを一瞬で判断する細部が改行です。2 行目に 1 文字だけぽつんと残った見出しは、言葉がすべて正しくても壊れて見えます。

日本語がおかしな位置で改行される理由

英語はスペースで改行するので、行より長くない限り単語は切れません。日本語はスペースなしで書かれ、標準のルールではほぼどの 2 文字の間でも改行できます。本文ならそれで問題ありません。読み手も慣れています。でも見出し、ボタン、短いリード文は違います。「東京」や「ダウンロード」のような言葉の途中で改行されると、読み方が変わり、大きな文字ではいい加減に見えます。

禁則処理というルールもあります。小さい仮名、閉じ括弧、句点「。」などは行頭に来てはいけない。開き括弧などは行末に来てはいけない。W3C はこれを日本語組版処理の要件(Requirements for Japanese Text Layout)にまとめていて、全部読まなくても一度目を通す価値があります。デジタル庁も自分のデザインシステムでタイポグラフィを生きた部分として扱っています。どれくらいの頻度で改訂しているかは、日本政府は多くの輸出企業よりよいデザインシステムを持っているという記事に書きました。

auto-phrase：Chrome なら 1 行で解決

Chrome は word-break に、自然な文節の間でだけ改行する値を追加しました。Google のCSS の国際化機能についての記事によると、Chrome 119 で導入され、コンテンツの言語が日本語である必要があり、文節の境目を見つけるのに小さな機械学習モデル BudouX の C++ 版を使っています。

<html lang="ja">

h1, h2, h3, .lede, button {
  word-break: auto-phrase;
}

つまずきやすい点が 2 つあります。要素の lang が日本語として解決される必要があるので、多言語サイトではページやブロックごとに正しい lang が必要です。それから、私は見出しと短いテキストにだけ使っています。長い段落を文節で改行すると右端ががたがたになり、標準の改行のほうが読みやすいからです。

Safari と Firefox ではどうするか

MDN のブラウザ互換性データによると、Firefox はまだ auto-phrase に対応しておらず、Safari は Technology Preview のみです。これらのブラウザではプロパティが無視され、標準の改行になります。だから入れても害はありませんが、iPhone のユーザーには効きません。

見出しがいくつかだけなら、確実なのは手作業です。文節の境目に <wbr> を入れ、word-break: keep-all を加えます。これで CJK のテキストはその位置以外では改行されなくなります。改行できる場所が足りないと keep-all ははみ出すので、スマートフォンの幅で確認してください。

規模が大きいなら、BudouX がコードで同じことをしてくれます。README には、外部に依存せず、モデル込みで約 15 KB、日本語、簡体字中国語、繁体字中国語、タイ語の学習済みモデルがあると書かれています。私はビルド時に見出しに対して実行しているので、HTML には最初から改行のヒントが入っていて、ブラウザでスクリプトは動きません。

字間と約物

改行は仕事の一部にすぎません。日本語フォントは「 や 、 といった約物を全角の枠の中に描くので、見出しに目立つすき間ができます。text-spacing-trim はそのすき間を詰めます。MDN のデータでは Chrome 123 から対応していて、Safari と Firefox はまだです。フォントの機能である palt はフォント自体を通じて似たことをし、フォントが対応していればどこでも効きます。

h1 { font-feature-settings: "palt"; }

palt は見出しに使い、本文はそのままにします。長い段落をプロポーショナルにすると、日本語は読みにくくなります。

text-autospace は、日本語と欧文や数字の間に少しすき間を入れます。デザイナーが文中の「iPhone」の前後に手でスペースを入れていた、あのすき間です。比較的新しく、対応状況はブラウザによって違うので、頼る前に最新の表を確認してください。

より厳しい禁則を使いたいなら line-break: strict を指定します。たとえば「ょ」のような小さい仮名を行頭に置かないようにできます。現在の Chrome、Firefox、Safari で使えます。

短いチェックリスト

  • すべてのページと、言語が混ざるブロックに正しい lang。
  • 見出し、リード文、ボタンに word-break: auto-phrase。
  • Safari で大事な見出しには <wbr> か BudouX。
  • 大きな文字には palt、本文は標準の字間。
  • 日本語の本文の行間は英語より少し広く、見出しは詰める。
  • 公開前に、Safari の 390 ピクセル幅で実際に見る。

改行がリリースのチェックリストに入ることはめったにありません。でも日本では、ページが完成して見えるかどうかを決める要素です。日本の UX のほかの部分で小さな細部が信頼をつくるのと同じです。ここに挙げた修正のほとんどは、午後ひとつあれば終わります。

← 記事一覧