text-box-trim — the headline gap playground

<div class="pg">
    <h1 class="pg-title">🎮 text-box-trim vs. the negative-margin guess</h1>
    <p class="pg-sub">
      Same headline, same <code>line-height</code>, two boxes. The left one is trimmed with a
      hand-tuned negative margin — the classic hack. The right one uses
      <code>text-box-trim: trim-both</code>, which asks the browser to crop to the font's own
      cap-height and baseline. Drag the line-height slider and watch which one keeps up.
    </p>

<div class="banner show info" id="supportBanner" style="margin-bottom:14px">
      Checking your browser's <code>text-box-trim</code> support…
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="wrap-controls">
        <div class="field">
          <span class="ctl-label">line-height: <strong id="lhVal">1.1</strong></span>
          <input type="range" id="lhSlider" min="1" max="2.2" step="0.1" value="1.1" />
        </div>
        <div class="field">
          <span class="ctl-label">text-box-edge (right box only)</span>
          <div class="seg" role="group" aria-label="text-box-edge">
            <button type="button" data-edge="cap alphabetic" aria-pressed="true">cap alphabetic</button>
            <button type="button" data-edge="ex alphabetic" aria-pressed="false">ex alphabetic</button>
          </div>
        </div>
        <label class="toggle">
          <input type="checkbox" id="trimToggle" checked />
          <span class="switch"></span>
          <span>trim the right box</span>
        </label>
      </div>
      <div class="presets" style="margin-top:12px">
        <button class="btn sm" data-preset="tight">Tight display text (1.0)</button>
        <button class="btn sm" data-preset="default">Typical heading (1.1)</button>
        <button class="btn sm" data-preset="loose">Loose / mobile (1.6)</button>
      </div>
      <p class="hint">
        The dashed outline is each box's actual line box. Smaller gap between the outline and the
        letters means less reserved whitespace.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="compare">
        <div>
          <div class="box-label"><span class="old-way">❌ negative margin, tuned once for 1.1</span><span class="h" id="hackHeight">—</span></div>
          <div class="stage">
            <div class="headline-box" id="hackWrap">
              <h2 class="headline" id="hackHeadline">Ship it Friday</h2>
            </div>
          </div>
        </div>
        <div>
          <div class="box-label"><span class="new-way">✅ text-box-trim: trim-both</span><span class="h" id="trimHeight">—</span></div>
          <div class="stage">
            <div class="headline-box" id="trimWrap">
              <h2 class="headline trimmed" id="trimHeadline">Ship it Friday</h2>
            </div>
          </div>
        </div>
      </div>

<div class="status" style="margin-top:14px">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Ready — drag the line-height slider.</span>
      </div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.