About (text) letter spacing 2026

●CJK含む文字送り設定は結局何が最適なの

:where(:root) {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  text-spacing-trim: trim-start;
}

参照：
・Qiita - word-break: auto-phrase は貧弱なので word-break: keep-all を使うべし
・ICS - 文章の折り返し指定のCSS
・ICS - CSSで文節の折り返しを！ br・wbrとauto-phraseの活用術

●キーワード

●text-spacing-trim: trim-start
- Limited Availability
CJKテキストにおいて、約物(句読点やカッコなど)と他の文字のの間のスペースを制御する。
trim-startを指定することで頻繁に指摘される行頭" 「"の余白が削除されるため、Safariでも対応が開始され次第スタンダードとなりそうなプロパティ。

●word-break: auto-phrase
- Limited Availability
CSS Text Module Level 4 において追加されたキーワード。
CJKテキストについて、文節に適した折り返しを機械学習を基にしたユーザエージェントの判断に委ねて演算する。
あくまで他所に依存する処理のため、今後の学習次第だが意図した通りの挙動とならない場合がある。
後述の参照記事においては、word-break: keep-allプラスoverflow-wrap: anywhereの組み合わせに対し良好な出力結果が得られないという結果になっている。

●word-break: keep-all
- Baseline Widely Available
CJKテキストの改行を許可しない。CJK以外のテキストについてはnormalと同等。
和文を用いる場合一見不適切なキーワードに思えるが、検証では overflow-wrap: anywhereと組み合わせることでauto-phraseより好ましい結果を獲得している。

●overflow-wrap: anywhere
- Baseline Widely Anywhere
旧プロパティ名：word-wrap
インラインテキストが行ボックスから溢れそうになった際に、ユーザエージェント側では分割できない文字列について任意の場所で折り返す可能性を設ける。
break-wordキーワードとの違いは、実際に折り返しされた際にコンテンツの最小固有寸法に対して折り返しで生じた余白を考慮するのがanywhere、考慮しないのがword-breakとなる。

●text-wrap: balance
- Baseline2024 Newly Available
短いテキストが複数行存在するブロックに対し、各行の文字数バランスが整うよう制御する。
端末リソースに一定の負荷がかかるためChromiumでは6行、Firefoxでは10行と適用限界が定められている。

●text-wrap: pretty
- Limited Availability
balanceに対して長文を保有するブロックに対し、全体にバランスの取れた改行位置を演算するキーワード。
具体的にはブラウザに対し負荷よりも美しさを優先するよう指示する。
これまた端末に一定の負荷がかかるため、何よりもレイアウトを優先する場合に適用すべし……とされているが、負荷の度合いがわからないため当サイトではとりあえず全体に適用している。