CSS text-box-trim

Adam Argyle

公開日: 2025 年 1 月 14 日

Chrome 133 以降では、text-box を使用して、テキストの上下のスペースをデベロッパーやデザイナーが調整できるようになります。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

Source

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 も知るようになりました。

CodePen で試す

フォントの上下にスペースがあるのは、ウェブでテキストをレイアウトする方法（「ハーフ リーディング」）によるものです。この点については、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 も示しています。

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

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

テキスト ボックスの構文プレビュー: trim-both cap alphabetic 構文がハイライト表示されている。トリム値を選択するためのプルダウンが 3 つあります。

試してみる:

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

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

このトリミング機能から、はるかにシンプルなセンタリングと配置のソリューションがいくつか生まれています。gap などの文字をコンテンツ間に使用して、適切な行送りに近づけることもできます。

2 つのコンテンツ グループの比較。
最初のグループはハーフ リーディング、2 番目のグループはトリム リーディングです。結果は、2 番目のグループがより緊密にまとまっていることです。CodePen で試す

中央揃えが容易に

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

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

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

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

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

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
2 つの例を示します。
1 つ目は、パディングが 10px で行間が 1/2 の要素を示しています。2 つ目は、text-box: trim-both cap alphabetic を使用した同じ要素を示しています。その結果、2 番目のボタンが光学的に中央に配置されます。CodePen で試す

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

3 つのボタン グループ。1 つ目は通常のサンセリフ フォントを使用し、2 つ目はファンシーまたは楽しいフォントを使用し、3 つ目は手書きフォントで同じ効果を使用しています。
フォントごとに半角の行間スペースは異なりますが、トリム値は同じで、スペースを正規化できます。CodePen で試す

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

タグが並べて比較表示されます。最初のグループはハーフ リーディング、2 番目のグループはトリミングされたリーディングです。
2 つ目のタグのグループは、行送りがトリミングされているため、よりタイトで光学的に中央に配置されています。

調整が容易

テキスト ボックスの上（over）と下（under）にある制御不能な余分な半角スペースも、配置を難しくしています。次の例は、ハーフ リーディングによって配置が難しくなる場合と、テキスト ボックスのブロック側をトリミングすることで配置が改善される場合を示しています。

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

CodePen で試す

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

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

CodePen で試す

学習を続ける

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