text-wrap: balance & pretty — end headline orphans

<div class="pg">
    <h1 class="pg-title">🎮 text-wrap: balance — end the headline orphan</h1>
    <p class="pg-sub">
      The default line-breaker fills each line greedily, so a headline near its
      container edge strands its last word alone. <code>text-wrap: balance</code> evens
      the lines out instead. Edit the text, drag the width, and watch both boxes
      re-break — the metrics are <strong>measured from the real rendered lines</strong>.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Your headline &amp; its container width</div>
      <div class="field">
        <label class="label" for="headlineInput">Headline text</label>
        <input id="headlineInput" type="text"
          value="The Practical Guide to Building Resilient Web Apps"
          aria-label="Headline text" />
      </div>
      <div class="presets" style="margin-top:12px">
        <button class="btn sm" data-preset="The Practical Guide to Building Resilient Web Apps">📘 Guide headline</button>
        <button class="btn sm" data-preset="Automate Your Deployment Pipeline Without the Overhead">🚀 Marketing card</button>
        <button class="btn sm" data-preset="Ship faster with confidence">✨ Short &amp; punchy</button>
        <button class="btn sm" data-preset="Everything You Need to Know About Modern CSS Layout Techniques">📐 Long headline</button>
      </div>
      <div class="field" style="margin-top:16px">
        <label class="label" for="widthRange">Container width</label>
        <div class="wrow">
          <input id="widthRange" type="range" min="180" max="560" step="4" value="300" aria-label="Container width in pixels" />
          <span class="px" id="widthPx">300px</span>
        </div>
      </div>
      <div class="btn-row" style="margin-top:10px">
        <button class="btn ghost sm" id="resetBtn">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Same headline, same width — two line-breakers</div>
      <div class="banner info" id="supportBanner">
        ⚠️ This browser doesn't support <code>text-wrap: balance</code>, so both boxes
        below fall back to the default and look identical. Try the latest Chrome, Firefox, or Safari.
      </div>
      <div class="two">
        <div>
          <div class="spec-head">
            <span class="spec-name bad-h">❌ Default (text-wrap: normal)</span>
          </div>
          <div class="stage">
            <div class="specimen greedy" id="specGreedy">
              <p class="headline" id="hlGreedy"></p>
            </div>
          </div>
          <div class="metrics" id="metGreedy"></div>
        </div>
        <div>
          <div class="spec-head">
            <span class="spec-name good-h">✅ text-wrap: balance</span>
          </div>
          <div class="stage">
            <div class="specimen balanced" id="specBalanced">
              <p class="headline" id="hlBalanced"></p>
            </div>
          </div>
          <div class="metrics" id="metBalanced"></div>
        </div>
      </div>
      <div class="status good" style="margin-top:14px" role="status" aria-live="polite">
        <span class="dot good" id="statusDot"></span><span id="statusText">Adjust the width until the default box orphans its last word.</span>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Body text is different — that's what <code>text-wrap: pretty</code> is for</div>
      <p class="hint" style="margin-top:0">
        <code>balance</code> would reshape every line of a long paragraph. <code>pretty</code> only
        touches the last few lines, pulling a stranded final word back up. Toggle it:
      </p>
      <label class="toggle" style="margin:6px 0 14px">
        <input type="checkbox" id="prettyToggle" /><span class="switch"></span>
        <span>Apply <code>text-wrap: pretty</code> to the paragraph</span>
      </label>
      <div class="stage" style="justify-content:flex-start">
        <p class="prose normal" id="prose">
          Long-form paragraphs have their own orphan problem: a single word stranded on the
          last line looks unfinished. Turning on pretty asks the browser to look ahead and
          avoid it, without disturbing the rhythm of the lines above.
        </p>
      </div>
      <div class="metrics" id="metProse" style="margin-top:10px"></div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> The whole fix, in two rules</div>
      <div class="code" id="cssBlock" aria-hidden="true"></div>
      <p class="hint">Baseline 2024 — no JavaScript, no <code>&lt;br&gt;</code>, no ResizeObserver. Unsupported browsers just fall back to the default wrap.</p>
    </div>
  </div>

preview

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

text-wrap: balance &amp; pretty — end headline orphans

text-wrap: balance & pretty — end headline orphans