海外製ブログテンプレートの日本語の折り返しを CSS 3行で直す

海外製のブログテンプレートを日本語で使ってみたら、本文の折り返しがどうも読みにくい。よく見ると「で｜す。」「サイ｜ト」「スマートフ｜ォン」のように、語の途中で改行されていました。

原因は、テンプレートが英語前提になっていたことです。lang を ja にして CSS を3行足すと、文節の切れ目で折り返すようになりました。

Before / After

同じ文章・同じ幅（360px）で、CSS だけを変えて比べたのがこちらです。

Before で気になっていたのは次の4つです。

1. 「です」が「で｜す。」に割れる
2. カタカナ語の途中で切れる（「サイ｜ト」「タイ｜トル」）
3. 小さい「ォ」が行頭に来る（「スマートフ｜ォン」）
4. 「読みやす｜くなります」と語が割れて、最後の行に短く残る

After では、どれも語のまとまりで折り返されています。

原因: テンプレートが英語前提だった

試していたのは EmDash（Astro ベースの CMS）のブログテンプレートです。初期状態では次のようになっていました。

• <html lang="en"> になっている
• 本文のフォントは Inter（欧文フォント）だけで、日本語は OS 任せの代替フォントになる
• 日本語向けの改行の指定がない

ブラウザは lang を見て改行のルールを決めます。英語として扱われると、日本語は基本的に「どの文字の間でも改行してよい」ことになり、語の途中でも平気で折り返されます。

直し方

1. lang="ja" にする

まずはここからです。後で出てくる auto-phrase も、日本語として扱われていないと効きません。

<html lang="ja">

2. 本文に CSS を3行足す

.prose {
  word-break: auto-phrase; /* 文節の切れ目で改行する */
  line-break: strict;      /* 行頭禁則を厳しめにする */
  text-wrap: pretty;       /* 最後の行が短く残るのを避ける */
}

• word-break: auto-phrase: ブラウザが文を文節に分け、その切れ目で改行します。①②④が直るのはこれのおかげです。
• line-break: strict: 小さい「ォ」「ッ」や長音「ー」が行頭に来ないようにします。③はこれで直ります。
• text-wrap: pretty: 段落全体を見て改行位置を調整し、最後の行に1〜2文字だけ残るのを避けます。

3. 日本語フォントをフォールバックに足す

欧文フォントのあとに、日本語フォントを並べておきます。

// astro.config.mjs の fonts 設定
fallbacks: ["Hiragino Sans", "Noto Sans JP", "Yu Gothic", "sans-serif"],

Mac ではヒラギノ、Windows では游ゴシックで表示されます。

注意点

• auto-phrase は Chrome / Edge だけ: 執筆時点で対応しているのは Chrome / Edge（119 以降）だけで、Safari と Firefox は未対応です。未対応のブラウザでは無視されて、従来どおり1文字単位で折り返します。崩れはしないので、入れておいて損はありません。
• text-wrap: pretty もブラウザによる: Chrome / Edge と最近の Safari は対応していますが、Firefox はまだ確認できていません。こちらも未対応なら無視されるだけです。
• 右端がガタガタになる: 文節で改行するので、行の長さがそろいません。本文は読みやすさを優先して、このままにしています。

まとめ

海外製のテーマを日本語で使うなら、まず lang="ja" と次の3行を入れるのがおすすめです。

.prose {
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}

スマートフォンのように幅が狭い画面ほど効果がわかりやすいです。