Precision Text Trim

Fixes the classic 'this badge/button text looks vertically off-center even though I centered the box' problem — with one CSS property instead of a negative-margin or manual line-height hack. Browsers reserve extra leading space above/below a line of text (visible below as a highlighted line-box); text-box-trim: trim-both plus text-box-edge: cap alphabetic trims that box down to the font's real cap-height-to-baseline, so flexbox/grid centering lands on the glyphs themselves, not the padded line box. Real, current, sourced support as of this run: shipped unflagged in Chrome/Edge since Chrome 133 and Safari since Safari 18.2 (both early 2025), and Baseline 'newly available' since August 2026 per the Chrome for Developers and MDN write-ups; Firefox has not shipped it in stable yet, tracked in Mozilla's own bug tracker (bugzilla.mozilla.org, bug 2050141) toward parity, and it's a 'Done'/positive-position item in the cross-browser Interop 2026 project. Zero JavaScript, and it degrades with zero risk: a browser that doesn't understand text-box-trim just ignores the declaration and keeps the old default leading — no broken layout, no console error — which the @supports block below surfaces as a small note rather than hiding. (Vanilla example: live iframe preview + HTML/CSS tabs — the highlighted background on each label shows the actual line-box bounds.)

<div class="ptt-row">
  <div class="ptt-col">
    <span class="ptt-label">Default leading</span>
    <div class="ptt-frame"><span class="ptt-ink">Deploy now</span></div>
  </div>
  <div class="ptt-col">
    <span class="ptt-label">text-box-trim</span>
    <div class="ptt-frame"><span class="ptt-ink ptt-trimmed">Deploy now</span></div>
    <span class="ptt-note">Needs Chromium 133+ / Safari 18.2+</span>
  </div>
</div>