📖 推定読了時間：約6分
Webデザインやフロントエンド開発において、「ボタンの中のテキストが微妙に下にズレて見える」「Flexboxで中央揃えにしたのにアイコンと文字の高さが合わない」とイライラした経験はありませんか？
さらにスマートフォンでWebサイトを見たとき、せっかくのキャッチコピーの見出しが、画面幅のせいで「最後の1文字や句読点だけ次の行に落ちてしまう（孤立改行）」という不格好な現象も頻繁に起こります。これらはすべて、活版印刷時代から続く文字組みの仕組みとCSSの仕様のギャップから生じていた問題でした。
しかし今、W3Cで策定が進みブラウザ実装が急速に進んでいる新仕様「text-box-trim」と「text-wrap: balance / pretty」によって、Webの文字組みは劇的な進化を遂げようとしています。なぜこの数行のCSSプロパティが、Webデザインの長年の悲願を解決してくれるのでしょうか？
この記事のポイント
- フォント特有の不要な上下余白（ハーフリーディング）を物理的に削ぎ落とす
text-box-trim - ボタンやバッジ内部で、ネガティブマージンなしの「完璧な垂直中央揃え」を実現
- 見出しの行長を均等化する
balanceと、末尾の1文字落ちを自動防止するpretty
ボタンの上下ズレの元凶「ハーフリーディング」とは？
なぜCSSで display: flex; align-items: center; を指定しても、文字はボックスの真ん中に収まってくれないのでしょうか？
その原因は、デジタルフォント内部に埋め込まれている「仮想ボディ（EMボックス）」と「ハーフリーディング（行送りのための余白）」にあります。フォントデザイナーは、アセンダー（dやhの上の飛び出し）やディセンダー（pやyの下の飛び出し）が隣の行とぶつからないよう、文字の上下にあらかじめ見えない余白を持たせています。特に日本語フォント（和文フォント）は欧文フォントと基準線が異なるため、上下の余白が非対称になりがちでした。
結果として、Web制作者は padding-top: 1px; のような微調整や、フォント固有のネガティブマージンを泥臭く記述して誤魔化すしかなかったのです。
タイポグラフィの歴史的背景やフォントメトリクスの基礎を深く学びたい方には、Web組版のバイブルである モダンWebタイポグラフィ・CSSデザイン設計実践ガイド が必読です。行間比率や文字詰め（kerning）の美学が論理的に腑に落ちます。
余白をスパッと切り落とす「text-box-trim」の衝撃
この長年の悪夢に引導を渡すのが、CSS Inline Layout Module Level 3で策定された「text-box-trim」（および text-box-edge）です。
.my-button {
text-box-trim: both;
text-box-edge: cap alphabetic;
}
このプロパティを宣言すると、ブラウザは文字の頭頂部（キャップハイト）から基準線（ベースライン）までの「純粋な文字の高さ」だけをコンテンツ領域として認識し、フォントに付随していた上下の余分な隙間を完全に切り捨て（トリム）ます。
これにより、デザイナーがFigmaなどのデザインツールで作った「上下均等なパディング」が、CSSコーディングでも1ピクセルも狂わずにそのまま完全再現されます。
見出しの1文字落ちを自動撲滅する「text-wrap: pretty / balance」
もう一つの革命が、テキストの折り返しを賢く制御する text-wrap プロパティの拡充です。
| 値 | 動作メカニズム | 最適な適用箇所 |
|---|---|---|
| text-wrap: wrap（従来） | 幅の限界まで文字を詰め、溢れた分だけ改行 | 長文の本文段落 |
| text-wrap: balance | 各行の文字長が均等になるよう自動バランス計算 | 大見出し（h1/h2）、キャッチコピー（4行以内） |
| text-wrap: pretty | 末尾に単語や1文字だけが取り残されるのを自動検知・回避 | 本文の段落、リード文、リスト項目 |
これまでWeb制作者は、見出しが変な位置で改行されるのを防ぐために <br class="sp-only"> を入れたり、JavaScriptで文字数を監視していました。しかし、text-wrap: balance や pretty を1行指定するだけで、あらゆる画面幅においてブラウザ自身が最も美しく読みやすい改行位置を自動計算してくれます。
読みやすさとアクセシビリティを両立したWebフロントエンドの実装作法を総合的に学びたい方は、現場のUI設計論が凝縮された WebフロントエンドUI/UX・Webアクセシビリティ実践入門書 が非常に心強い指針になります。
- ✅プログレッシブ・エンハンスメントの容易さ：未対応ブラウザでは単に従来の折り返しになるため即座に導入可能
- ⚠️balanceの長文適用禁止：計算負荷の観点から最大6行程度までの見出しに限定して使用
- 👍日本語タイポグラフィの美観向上：句読点のぶら下がりや行頭禁則処理との相乗効果で雑誌並みの組版品質へ
まとめ
text-box-trim と text-wrap: pretty / balance の登場により、Webの文字組みは「印刷物のクオリティ」へと一歩大きく近づきました。ハック的なマージン調整や余計なJSコードを捨て去り、ブラウザ本来のタイポグラフィ能力を活かす時代の到来です。
まずはブログの見出しに text-wrap: balance; を指定してみてください。スマートフォンの画面を伸縮させたときの改行の美しさに、きっと感動するはずです！
0 件のコメント:
コメントを投稿