マーケの静的HTML出力は、いまも窄いカードに複数行の見出しを載せる。既定の折返しでは最終行だけ極端に短く「尻尾」のように見え、CTAへ視線が抜ける。2026年 は text-wrap: balance で行長を揃え、text-wrap: pretty で段落ラグを穏やかにできる（対応ブラウザのみ）。手動 <br> は翻訳で一斉に破綻する。CWVのラボとフィールドSafari と併読し、タイポ改善をLCP改善と取り違えないこと。フォーム併設カードは field-sizing の記事 も参照。
対象読者は静的サイト作者、デザインシステム担当、macOS Safari で最終サインオフが必要なプロダクトチーム。
ワイドウ問題
CMSは最終カード幅を知らない。ドイツ語訳は本文量が約 30% 増え、ソフト改行は破綻しやすい。宣言的ルールは描画幅に従うため多言語で強い。
写真上のヒーロー見出しでも、ラグが荒いとボタンから視線が逃げる。
balance の仕組み
.card-title {
text-wrap: balance;
max-inline-size: 22ch;
}max-inline-size で探索空間を制限。長いトークン列には overflow-wrap: anywhere を保険に。
端末回転で再レイアウトが増える。幅アニメは 300ms 以内に抑え、ジッタを避ける。
pretty の適用範囲
脚注や注意書きなど短い段落向け。全文が 40KB 近い記事の全段落へ pretty を敷くのは避ける。Safari でセレクタ合成コストが跳ねる。
使い分け表
| 文脈 | balance | メモ |
|---|---|---|
| カード見出し | 推奨 | 2–3行で効く。 |
| 全大文字の免責 | 注意 | letter-spacing と干渉し得る。 |
| コード | 不可 | 等幅を守る。 |
| ナビ | ほぼ不要 | 1行なら無意味。 |
Safari と混植
WebKit は日英混植のブレーク候補が Chromium と微妙に違う。320px / 390px / 834px でスクショ比較。line-break: strict と balance の併用は別検証が安全。
マイナーOS跨ぎなら Safari Technology Preview も。2026年 はテキスト系の修正が続く。
縦書きモードや writing-mode を併用するキャンペーンLPでは、balance の有効範囲が想定とズレることがある。該当セクションだけ別コンポーネントに切り出し、QAシートに「横書き／縦書きそれぞれ3枚」のスクショ欄を必須化すると抜け漏れが減る。
サブピクセル丸めの差で文字送りが1px変わると、最終行の字数バランスが逆転することがある。デザイントークンの letter-spacing を微調整したら、必ず balance 有効時のスクショも更新すること。
アクセシビリティ
読み上げ順序は不変だが拡大表示では行境界が動く。フォントサイズのバネ動画と同時トグルは避ける（前庭症状の報告あり）。
forced-colors: active で背景写真との重なりが変わる場合、コントラストを再確認。
プログレッシブエンハンスメント
@supports (text-wrap: balance) {
.hero-title { text-wrap: balance; }
}性能の注意
モバイルGPUでは可視の balance 要素をおおよそ 12個 までを目安にプロファイル。contain: inline-size は過剰だとフォーカスリングを欠ける。
コンテンツ協業
行長予算は ch で書き、Storybook に残す。A/Bでは文案バージョンとCSSバージョンを分離して計測ノイズを減らす。
RTL と論理プロパティ
dir="rtl" でも balance は有効だが上限は論理プロパティで。アイコン余白は margin-inline-start。
リリース前チェック
- 各ロケール最長文字列で3ブレークポイントを撮影。
- macOSのコントラスト強化をオン。
- Safari/Chrome で印刷PDFの改ページ比較。
- 幅リサイズを 30秒 録画し、M3級でフレーム 100ms 未満を目標。
RUM での代理指標
見出しコンテナのCLSを監視。.hero-title が 0.01 を超えたら max-width フォールバック欠如を疑う。Safari UA でリプレイを絞る。
トークンとユーティリティ
グローバル .text-balance の乱用は gzip 体積を押し上げる。clamp() 変更のたびに ch 上限を再計算。
CMS ガード
NBSP連打はアルゴリズムを壊す。パイプラインで除去可否を制御。プレビューは本番フォントを。
プラットフォーム引き継ぎ
HTMLとCSSのCDNパージ順を文書化。text-wrap だけ外すワンラインロールバックを添付。SRIハッシュは見出しユーティリティ更新のたびに更新。変更ログでサポートがスクショと突き合わせ可能に。
CIに「見出しユーティリティのgzip増分 1.5KB 超で人間レビュー」ゲートを置くと、微調整のはみ出しを防げる。
FAQ
ボタンラベルに balance？
基本不要。1行省略が堅実。
印刷では？
@media print でリセットも選択肢。
コンテナクエリの代替？
いいえ。幅決定と折返し最適化は役割が違う。
タイポの最終判断は読者と同じGPUで。Apple Silicon の Mac mini は静音で長時間のピクセル比較に向く。MacHTML のクラウドMacは 1日約$16.9 から。SSHでスクリーンショット回帰、VNCでデザイナーを同席させ、テスト専用機のCAPEXを抑えられる。