text-box-trimプロパティとフォーム部品の組み合わせの懸念点
テキストの上下をトリミングする text-box（あるいは text-box-trim）を使うとどうなるか調査しました。
対応ブラウザ
対応ブラウザは以下。
- ChromeとEdge（Blink系）
- Safari
Firefoxは2025年2月現在で未対応です。
余白を上下と左右に揃えたい
まず背景から。カードコンポーネントなどを作ろうとすると、余白の問題にあたります。ハーフレディング問題です。
試しに白いカードコンポーネントを padding: .25em で作ります（サンプル画像はわかりやすさのため高さを最小にしてます）。すると上下の余白のほうが多くなります。line-height があるため上下の余白が多くなっています。
CSSは行間を設定することができません。代わりに line-height を設定するわけですが、上下の余白が長らく悩みのタネでした。「無視をする」か「親要素の上下のpaddingを左右より小さくする」のどちらかを取ることが今までは多かったです。
理想
ここで text-box という新しいプロパティを使うことで理想的なカードコンポーネントになります。これは行の上下をトリミングしてくれます。
.card {
text-box: trim-both text text;
}
text-box: trim-both cap alphabetic; が「最も一般的な用途」だそうです。しかし漢字などを使うアジア圏では上記を理想とすることも使うことも多いでしょう。
上記の記述は下記をショートハンドにしたものです。
text-box-trim: trim-both;
text-box-edge: text;
line-fit-edge: text;
text-boxを適用したインラインブロック
しかしここでinput要素やbutton要素などを配置してみると要素がはみ出してしまい、理想的な見た目になりません（これが理想だという人はいるかもしれませんが）。textarea要素も同様です。
text-boxを適用したフレックスボックス
上記を解決するためフレックスボックスを適用しましょう。
それぞれ align-items: start; で実装しています。上記の問題は解決しましたが、text-box が効いていません。
すべての要素にtext-boxを適用したフレックスボックス
* {
text-box: trim-both text text;
}
すべての要素に適用することで今度は理想的になりました。もちろん部分的に使用するのもありです。display: flex ではなく display: grid のプロパティを使っても同じようになります。Safariも基本的には同様です。
まとめ
CSSで新しく（Chromeは2025年2月のリリースで）登場した text-box プロパティはとても便利な機能で今度のスタンダードになっていくでしょう。
しかし一部で理想と違う表示になるため留意が必要です。今回はフレックスボックスを使用しましたが、すべてのレイアウトをそれにするのも難しい場合も多いと思うので何かよい手段があれば教えてください。
私自身もまだ手探りなため、* { text-box: trim-both text text;} とフレックスボックスでリセットするのが理想なのか試していきたいです。
Firefoxなどの未対応ブラウザは「気になる箇所だけ部分的に @supports not (text-box: trim-both text text) { button { line-height: 1;}}」のようにするのもありなのではと考えています。つまり未対応であれば line-height: 1 を適用します。または、calc((1em - 1lh) / 2)という解決方法だったり、カスタムプロパティに足し合わせたものを設定する解決方法だったり。どれもメリット・デメリットはあるのでサイトに合わせて取り入れるとよいでしょう。
Discussion