CSS text-box-trim

Adam Argyle

公開日: 2025 年 1 月 14 日

Chrome 133 以降では、text-box を使用して、テキストの上と下のスペースを調整できます。

Longhand:

text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading + alphabetic | text;

Shorthand:

text-box: trim-both cap alphabetic;

このプロパティを使用すると、テキストの上と下のスペース（<h1>、<button>、<p> など）を制御できます。フォントごとに、要素のサイズに影響するブロック方向のスペースの量が異なります。このカオス空間の貢献度は簡単に測定できず、これまで制御することは不可能でした。

フォントが知っていることを CSS も知るようになりました。

フォントの上下にスペースがあるのは、ウェブでテキストをレイアウトする方法（「ハーフ リーディング」）が原因です。この点については、Matthias Ott 氏の投稿「The Thing With Leading In CSS」で詳しく説明されています。手動で組版を行っていた時代には、金属製の鉛の小片を使用してテキストの行を区切っていました。ウェブでは、リードにインスピレーションを得て、リードを 2 つに分割し、コンテンツの上と下にそれぞれ配置します。

この履歴は、text-box によって各半分（上と下）の名前が付けられるため、意味があります。また、トリミング機能も備わっています。

text-box にも先行技術があります。Ethan Wang の Leading-Trim: The Future Of Digital Typesetting というエキサイティングな投稿を覚えている方もいるかもしれません。この投稿で、leading-trim（以前の text-box の名前）が初めて紹介されました。

テキストのトリミングの入り口は、デザイナー向けの Figma とその「垂直トリム」コントロールかもしれません。この X の投稿では、この垂直トリム オプションがどこにあるか、ボタンにどのように役立つかを示しています。

ここまでの経緯はともあれ、この小さなタイポグラフィ コントロールは大きな違いを生み出す可能性があります。

機能と構文

text-box を使用する際に最もよく使用する 2 つのワンライナーを以下に示します。

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

両方を cap alphabetic にトリミングするのが、この機能の最も一般的な使用方法です。次のデモでは、この方法を何度も使用しています。ただし、前の例では ex alphabetic も示しています。これは、ex alphabetic が独自のユニークな方法で光学バランスに役立つためです。

エクスプローラ プレイグラウンド

プレイグラウンドで構文を試すと、プルダウン メニューを使用して結果を確認できます。フォントの変更、トリム値の変更、色分けされたビジュアルとラベルの確認が可能です。

試してみる:

1. text-box-trim が 1 行のテキスト バリアントと複数行のテキスト バリアントでどのように動作するかを目視で確認します。
2. バリエーションにカーソルを合わせると、その効果を実現するために使用されたトリム値が表示される。
3. フォントを変更する。
4. テキスト ボックスの片側のみをトリミングする。
5. 再生しながら構文を確認します。

何を構築でき、どのような問題を解決できますか？

このトリミング機能から、よりシンプルな中央揃えと配置のソリューションも生まれます。gap のようなものをコンテンツ間に使用して、適切な行送りに近づけることもできます。

中央揃えが簡単に

より小さく、インラインでコンテンツ固有のコンポーネントの場合、padding: 10px は要素のすべての辺に等間隔を指定する妥当なスタイルです。ただし、上下に余白が追加されることが多いため、結果がわかりにくくなることがあります。

この問題を回避するため、デベロッパーは通常、行間の影響を相殺するために、上下（ブロック）のパディングを明示的に小さくします。

button {
  padding-block: 5px;
  padding-inline: 10px;
}

この時点で、光学的に中央に配置されるまで値の組み合わせを試す必要があります。ある画面やオペレーティング システムでは適切に表示されても、別の画面やオペレーティング システムでは適切に表示されない可能性があります。

text-box を使用すると、テキストの先頭の半角スペースを削除できるため、10px のような等しいパディング値が便利になります。

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}

text-box でスペースをトリミングすると、padding: 10px が実用的なインタラクティブ要素のすべての辺で均等に見えることを示す <button> 要素をいくつか示します。代替フォントでは、半角の行間が大きく異なる場合があります。

<span> 要素は、カテゴリやバッジを表示するためによく使用されます。等しいサイズのパディングが最適なソリューションとなるもう 1 つのケースですが、text-box まで回避策を講じる必要がありました。

調整の容易さ

テキスト ボックスの上下にある制御不能な半分の行間（over と under）も、配置を難しくします。次の例は、半分の行間が配置を難しくする状況と、テキスト ボックスのブロックの側面をトリミングすることで配置を改善する方法を示しています。

ここでは、テキストの横に画像が配置されています。画像はテキストに必要な高さまで拡大されます。text-box がないと、画像は常に少し高くなります。text-box を使用すると、画像はテキスト コンテンツと完全に一致します。

行の折り返しがあるシナリオでは、空白が書式設定された最初の行のテキストの上に、書式設定された最後の行のテキストの下に表示されます。

次の例では、writing-mode の変更に機能が論理的に適応する方法を確認してください。テキストを変更して、レイアウトがどのように整列されたままになるかを確認してください。

学習を続ける

詳しくは、次のリンクには、さまざまな量の追加情報とユースケースが記載されています。

• すべてのデモの Codepen コレクション。
• Jan Nicklas による優れた研究とデモ。
• CSS Tricks の Two CSS Properties for Trimming Text Box Whitespace（テキスト ボックスの空白をトリミングするための 2 つの CSS プロパティ）。
• テキストの端の CSS インライン レイアウト。
• size-adjust や ascent-override と混同しないようにしてください
• CSS Baseline: The Good, The Bad And The Ugly（CSS ベースライン: 良い点、悪い点、醜い点）。
• 多くの HTML 要素に適用: CodePen。
• Safari のブログ投稿をご覧ください。
• デザイナーとして text-box-trim に期待している理由。