日本語サイトの「不自然な改行」を
エンジニアリングで解消する
日本語のWebサイトには、英語圏にはない組版の問題があります。単語の途中で行が折れる「プロフェッ／ショナル」のようなカタカナ語の泣き別れ、見出しの末尾に一文字だけ残る孤立行、行頭に句読点が来る禁則違反。弊社サイトの制作でこれらを潰し込んだ実装を、汎用的な形でまとめます。
ブラウザの既定挙動と問題の構造
日本語はスペースで分かち書きされないため、ブラウザは原則としてどの文字間でも改行できます。漢字の熟語が割れるのは慣習上許容されますが、カタカナの外来語が割れると読みにくさが際立ちます。また、見出しのような短い表示テキストでは、最終行に助詞や送り仮名だけが残ると意図しない「間」が生まれます。
第一層: CSSの禁則を強化する
まず全体に適用できる改善として、ルート要素に line-break: strict を指定しました。これにより長音符や小書き仮名（ょ・っ 等）が行頭に来る折り返しが禁止され、「まし／ょう」のような分断が仕組みで消えます。一行の追加で全ページに効くため、費用対効果が最も高い一手です。
第二層: 語単位の折り返し制御
カタカナ語の泣き別れは、対象の語を display: inline-block のスパンで包むことで防ぎます。inline-block は「収まるなら1語として送り、収まらなければ内部で折る」という振る舞いをするため、white-space: nowrap と違って極端に狭い画面でもレイアウトを壊しません。
.nw { display: inline-block; }
<p>経営の実戦経験を持つ
<span class="nw">プロフェッショナル</span>と
AIの最前線を知る<span class="nw">エンジニア</span>が…</p>
ひとつ落とし穴があります。inline-block の直後に句読点が続くと、ブラウザの禁則処理が働かず「。」が行頭に落ちることがあります。読点・句点は必ずスパンの内側に含める、が運用ルールです。
どこまで制御するかの線引き
すべての本文を制御するのは過剰です。弊社では「見出し・リード文・カードの短文は制御する。4行以上の本文は自然な折り返しに任せる」という線引きにしています。長文で語単位制御を多用すると右端の凹凸が目立ち、かえって組版が汚れるためです。制御は目立つ場所に絞る方が、総合的な読み心地は良くなります。
まとめ
禁則の強化で全体の下限を引き上げ、目立つテキストだけ語単位で仕上げる。二層構えにすることで、実装コストと品質のバランスが取れます。次の記事では、この改行品質を人力の目視ではなく機械的な走査で検査する仕組みを紹介します。