段落・折り返し
text-box-edge
text-box-edge は、text-box-trim で行の上下を削るときに、文字のどの高さまで削るかを指定します。大文字の上端やベースラインに合わせると、文字の上下の余白をそろえられます。
構文
auto | [ text | cap | ex | ideographic | ideographic-ink ]
[ text | alphabetic | ideographic | ideographic-ink ]?プレビュー
コード
.box {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}コントロール
解説
値の書き方
上の端と下の端の位置を、この順にスペースで区切って書きます（cap alphabetic）。上の端には次の値を使えます。
text：フォントの上端（アセント）。cap：大文字の上端（H の高さ）。ex：小文字の x の上端。ideographic：漢字・仮名の仮想ボディ（全角の正方形の枠）の上端。ideographic-ink：漢字・仮名の字面（実際に字が描かれる範囲）の上端。
下の端には次の値を使えます。
text：フォントの下端（ディセント）。alphabetic：ベースライン（英字が並ぶ線）。ideographic・ideographic-ink：上の端と同じく、仮想ボディ・字面の下端。
text・ideographic・ideographic-ink は、1 つだけ書くと上下の両方に使われます。cap・ex・alphabetic は片側にしか使えないので、1 つだけでは書けません。
初期値の auto は、今のブラウザでは text と同じです（仕様では、まだどのブラウザも対応していない line-fit-edge の値を使います）。
text-box-trim と組み合わせる
text-box-edge は削る位置を決めるだけなので、text-box-trim で削る側を指定しないと何も変わりません。このページのプレビューは、補助の宣言で text-box-trim: trim-both にしています。ショートハンドの text-box を使うと、text-box: trim-both cap alphabetic のようにまとめて書けます。
英字のボタンや見出しでは cap alphabetic にすると、上下の padding が同じなら文字が上下の真ん中に見えます。小文字が多い文では ex alphabetic も使えます。
ブラウザの対応
Chrome・Edge（133 以降）、Safari（18.2 以降）、Firefox（154 以降）が対応しています。ideographic と ideographic-ink は、今のところ Firefox だけが対応しています。