CSS text-box-trim and text-box-edge for cap and both-side trim, leading control, icon plus text alignment on static marketing HTML, Safari WebKit QA, accessibility, and cloud Mac mini rehearsal

マーケ用ランディングは大型ディスプレイ用タイポと引き締まったeyebrowラベルが並立し、デザイナーはcap高より上、ベースラインより下の「見えない空き」を揉み続けます。原因はFigma枠ではなくフォントのメトリクスです。2026 年、text-box-trim と text-box-edge はスタティックHTML作者に、行ボックスをタイポグラフィの辺に沿わせ、見出しの重なり、ピル型ラベル、アイコン行の整列を脆弱な負のmargin抜きで成し遂げる道を開きます。本稿ではcapと両側のトリムの違い、flex/グリッドを使ったアイコン+テキスト行、@supports による漸進的導入、Safari/WebKitとChromiumの分岐、トリム後行ボックスを扱うアクセシビリティ審査を扱います。合わせて 見出し向け text-wrap: balance と pretty、静的マーケHTMLでのCSS subgrid も併読し、トリムで行間が詰まったあとも改行とトラック整列の物語を揃えてください。

サブピクセル合わせの経済学は、Linux CIのスクリーンショット当て推量より、実Apple GPUで基線を再現する方が一貫します。MacHTML の Mac mini クラウド月額風 約16.9米ドル/日 を、下記の週次Safariサインオフ基準金額に置いています。

フォントメトリクス、行ボックス、トリムが要る理由

CSS行レイは伝統的に、書体デザイナーが大文字用に確保したアセンダ/ディセンダの遊びを内包する矩形にグリフを入れ、見出しがall capsでも余白が乗ることがあります。大文字Hの天辺をヒーロー動画切り抜きに面一にしたい一方、cap高より上へブラウザが高さを割り当てるのはグリフ境界がcapより大きいためで、line-height: 0.9 や負の margin-top や transform で焦点リングを壊す、という逃げ方が生まれてきたのです。トリム系プロパティはきれいな契約を出します。どのタイポグラフィの辺をレイアウト相互作用の行ボックスに使うかを宣言し、他グリフ向け余白を落とす。

EleventyやHugo等のHTML出力にランタイムデザイントークンは稀で、本番に届くのは指紋付きCSS一揃いです。だから非対応ブラウザ向け降格曲線を設計し、JS feature flag 依存は避けます。トリムはテキスト変形ではないという（レイアウト 調整という）理解を持てば、スクリーンリーダ、PDF、将来UAの表更新にも揉めにくいです。

多言語ではさらに詰まりがちです。和文サブ見出しをラテン帯域に挿入する、といった場合、1つの line-height 乗数では和字と大文字を両立しにくい。トリムと併用して text-box-edge: ideographic を与えると一貫したアンカーを得て、本文は1.6前後の読みやすい行送りのままに保てます。

text-box-trim：cap 高、trim-both、始端/終端のみ

text-box-trim は選んだ辺に向かって行ボックスの何側を削るかを決めます。画像と天辺だけ揃えれば足りる見出しはcap一方、ピル中の重ねラベルは trim-both で上下パディング計算の対称性を保てます。直前の要素で片側を処理済みのとき、片側だけを削る始端/終端専用トリムも有効で、罫とcap高が面付くが底まで二重削りしない、といった制御に使います。

.hero-kicker {
  text-box-trim: cap;
  text-box-edge: cap alphabetic;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

インタラクティブ要素にトリムを当てるとき、フォーカスリングはボーダー外へ膨らみます。行ボックスを削ってもフォーカス目標の十分なパディング要請は消えません。トリム後のグリフ枠外周とリング外周の間に少なくとも 3px の余白を保ち、macOSデフォルト焦点のWCAG2.2外観検査を通せるようにします。

トリムは親の overflow: clip とも干渉します。カードで子孫を厳しめに切るなら、混在スクリプトのディセンダが不意に欠ける恐れ。プライマリが英語でもベトナム語・ポーランド語の長い結合字でメトリを責め、思わぬ切り抜きを再現しておきます。

text-box-edge：cap alphabetic、text、ideographic ボックス

text-box-edge は削る基準枠の名前付けです。ラテン系の大見出しは cap alphabetic が多く、大文字をcap高に揃え下辺をアルファベットベースラインに取り、Material系アイコンフォントの期待に合います。同段に文sentence caseを混ぜるなら text（em box）の方が保守的に詰まり、安全マージンが増えます。

@supports (text-box-trim: both) {
  .price-row {
    text-box-trim: both;
    text-box-edge: cap alphabetic;
  }
}

和文のサブ見出しで、隣接ラテン大文字に近い二乗的整列をブランドが求めるなら text-box-edge: ideographic ideographic も候補。可変フォントのウェイト越しに和字辺がわずかに滑るため、前後のスクショ差分を必ず取り、韓国語ハングル束でも同じ厳格さを。サブセットが太字とレギュラーで高さを変える場合は特に注意です。

魔数なしでアイコンと文字列を揃える

デザインシステムのSVG/アイコンフォントは 24px 正方形が多い一方、光学中心はラテンcapと一致しません。常に translateY(-2px) で誤魔化すのではなく、ラベルをトリム可能なspanに包み、align-items: center のflex行に任せ、タイポのメトリを揃えます。行高はアセンダ余白ではなく、トリム後行ボックスに従います。

.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav-pill .label {
  text-box-trim: cap;
  text-box-edge: cap alphabetic;
}

多行本文の横にアイコンを置くとき、トリムするのは1行目タイトルだけ。複数行ブロック行ごとに削ると段落上辺の波が不揃いになります。1行目だけ専用span、本文は従来の line-height: 1.6 で可読性優先、が無難です。

静的マーケHTMLのパターンとバンドル節度

静的配信はCSSを極小化したがり、ユーティリティ束ね、使わない層落とし、gzip。宣言は小さいのに、セクション毎に見出しルールのコピペを誘惑します。単一の components/typography.css に .type-display などを集め、全ページ消費。外注に渡す文書化では「どの見出し組がトリム必須か」を明記し、ad hoc margin の再発を防ぎます。

CSSを指紋ファイル名にし、トリム辺の変更毎にCHANGELOG。視覚的リグレッションツールは、肉眼では「正しくなった」変化を失敗扱いにしがち。PRテンプレに「Safariで100%と125% UIスケール再撮影」を入れ、レビューとセットにします。

@supports 漸進的強化

層状フォールバック：トリム非搭載なら、調整した line-height と padding-block 明示で遜色ない外観。フォールバックは常緑Chromiumだけでなく Firefox ESR と旧Safari でも点検します。

.hero-kicker {
  line-height: 1.05;
  padding-top: 2px;
}
@supports (text-box-trim: cap) {
  .hero-kicker {
    line-height: 1;
    padding-top: 0;
    text-box-trim: cap;
    text-box-edge: cap alphabetic;
  }
}

ガードレール：flex親と子インラインに矛盾トリムをネストしない。匿名行ボックスを通る継承を理解するまで。QAの「突然の余白」はレガシー ::first-line 改行高疑い、computed styles を点検。

Safari / WebKit QA ノート

WebKitのトリムは他プラットフォーム文字APIに近い挙動ですが、macOS上がり枠のリリースでは Safari Technology Preview も必ず。可変軸でメトリ中間遷移があると各スタイルフレーム毎再計算し、400→700 のアニメが隣接するビデオマスクをズラします。遷移中はアニメ断ちか、軸凍結が安全。

Appleシリコンの外付けディスプレイでピッチが割り切れない倍率のとき、トリム見出しとビットマップロゴの0.5px取り扱い差が表に出ることが。診断限定で --disable-font-subpixel-positioning スナップ取得は可、本番用ではない。

アクセシビリティ：TalkBack、VoiceOver、拡大

トリムは幾何だけで、読み上げ内容は不変。リスクは視覚的：拡大閲覧では行距の予測性が要。本文大ブロックのトリム避け、単行ラベル例外的に。インタラクティブラベルの最小フォント 14px ポリシーを超えた過剰詰めは厳禁。

prefers-reduced-motion: reduce も。透明度フェードと併用すると、メトリ変化が揺れに見える。マイクロ操作は 220ms 以下で、前庭過敏の利用者にゆっくり揺れを与えない。

比較表：どの要素にどのトリムを

要素	推奨	理由
H1上のall caps キッカー	cap + cap alphabetic	アセンダ遊び削減、ヒーロー・メディア天辺に寄せ
価格の整数＋通貨記号	注意深く trim-both	等幅数字をピル中で面付き維持
多行本文	基本なし	長文読了の行間を保護
アイコン行のラベル	cap	translateY抜きで cap高に合わせ

番号付きリリースチェック

1. 3段階の見出しにトリムクラスを定義、禁止marginハックを文書化。
2. 最長のロケール文字列で 100% / 125% UIスケールの macOS Safari を通す。
3. トリム後のボタン/リンク周りのフォーカス外周完全可視性。
4. Firefox フォールバックの @supports off/on スクショ比較。
5. 1カラムでラテン+和文のベースライン遊びを圧力試験。
6. Webフォントスワップ後、Lighthouse a11y と CLS 再採点。
7. Pixel diff をコミットSHA付で保管し監査可読化。
8. 週次でクラウド Mac を共有、リモート外注含め同一ディスプレイ像。

よくある質問

line-height 自体の代替になる？

いいえ。トリムはメトリの遊びを減らす。明示した line-height の乗数は有効。キッカーは1、本文は大きめ乗数が多い。

PDFエンジンは尊重する？

バラバラ。法務免責文を裁く前に Safari 印刷→PDF 実験必須。

グラデボタン内のラベルも？

可。垂直中心の知覚が移るためコントラスト再確認を。

スタティックHTML上の仕上がり品質は、辺名暗記というより、本物の Safari・本番フォント・拡大率を回すリハーサル。約 16.9 米ドル/日 の MacHTML レンタル Mac mini なら、週次リグレッションとアイコン整合レビューに、日常開発用ノートを奪わず拠点を作れます。