このページはどう日本語を折り返しているか

狭いカラムで日本語を表示して、どこで折り返されるかを見てほしい。ブラウザは平気で特定商取引法を特定商取引 / 法に割るし、。を次の行の頭に送る。日本語には空白が無いから、既定の改行処理はほぼ全ての文字境界を折り返し候補として扱う。日本語で読む人からすると、これは英語でimpor / tantと割れているのと同じくらい壊れて見える。

多くのサイトはそのまま出している。日本語で読んで初めて気づく類の粗で、このサイト全体がだいたいそこを狙っている。

# 本当に欲しい挙動

日本語は文節、つまり自立語に付属語がくっついた単位で折り返す。加えて禁則がある。閉じ括弧や。は行頭に来ないし、開き括弧は行末に来ない。この二つが揃って初めて「ちゃんと組めている」と言える。

CSSは半分をタダでくれる。

.prose {
  line-break: strict;   /* 。、) を行頭に置かない */
  word-break: keep-all; /* 文字の連なりの途中で折らない */
  overflow-wrap: break-word;
}

line-break: strictが禁則の側を見てくれる。word-break: keep-allは、文字と文字の間ではもう折るな、とブラウザに伝える。ただこれだと何も折れなくなって、長い文がカラムからはみ出す。だから折り返し位置を自分で返してやる必要がある。今度は正しい位置を。

# 文節を見つける

折り返し位置は文節の境界で、それを見つけるには日本語を分割しないといけない。ここが一番厄介なところ。僕はBudouX、Googleの小さな文節モデルを使っている。文をこう刻む。

import { loadDefaultJapaneseParser } from "budoux";

const parser = loadDefaultJapaneseParser();
parser.parse("特定商取引法の表示ページが無い。");
// → ["特定商取引法の", "表示ページが", "無い。"]

刻んだ塊を<wbr>、「必要ならここで折ってよい」タグで繋ぐ。word-break: keep-allが効いた状態なら、ブラウザはその位置でだけ折る。

- <p>特定商取引法の表示ページが無い。</p>
+ <p>特定商取引法の<wbr>表示ページが<wbr>無い。</p>

。が無いにくっついたまま残っているのに注目してほしい。文節分割から禁則がタダで落ちてくる。モデルは付属の句読点の前に境界を置かないので、そもそもその前で折れる余地が無い。

これをブラウザではなくビルド時に走らせている。小さな処理がレンダリング後のHTMLを歩いて日本語のテキストに<wbr>を差し込み、<code>や<pre>の中は素通りするのでコードサンプルには触れない。モデルはビルドマシンに残ったまま。読み手が受け取るのは数個の<wbr>だけで、JavaScriptは無し。

# どこで止まるか

BudouXはルール集じゃなくてモデルなので、だいたい正しいけど厳密には正しくない。稀な複合語を組版家なら割らない場所で割ることがあるし、両端揃えや約物の詰めについては何も言わない。普通の字送りの本文なら、今のところ手で直す必要は出ていない。出たらここに書く。

正直な限界はいつもの一点。これは機械的な部分を直すだけ。その日本語が読む価値のある文かどうかまでは教えてくれない。そこはまだ人の仕事。

下で実際に動く。幅を狭めていくと、左のカラムは単語を真っ二つにするのに、右は保つ。