fix-page-print-display.js

/* paste me into the browser's dev console */

(() => {
  const id = 'print-fix-integer-lineheight';
  const css = `
@media print {
  *, *::before, *::after {
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
  }
  /* flex/grid fragmentation can trigger bad clipping in print */
  * {
    break-inside: auto;
  }
  /* avoid weird scroll containers */
  html, body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
`;
  let style = document.getElementById(id);
  if (!style) {
    style = document.createElement('style');
    style.id = id;
    document.head.appendChild(style);
  }
  style.textContent = css;

  const touched = [];
  const targets = document.querySelectorAll('p, li, blockquote, pre, td, th, dd, dt, h1, h2, h3, h4, h5, h6, div, span');

  function roundPx(v) {
    const n = Number.parseFloat(v);
    if (!Number.isFinite(n)) return null;
    return Math.ceil(n); // push up to avoid glyph clipping
  }

  for (const el of targets) {
    const cs = getComputedStyle(el);
    if (!cs || cs.display === 'none') continue;

    const lh = cs.lineHeight;
    const fs = Number.parseFloat(cs.fontSize) || 16;

    let lhPx = null;
    if (lh.endsWith('px')) lhPx = roundPx(lh);
    if (lh === 'normal') lhPx = Math.ceil(fs * 1.35);

    if (lhPx && lhPx > 0) {
      touched.push([el, el.style.lineHeight, el.style.paddingBottom]);
      el.style.lineHeight = `${lhPx}px`;
      // tiny nudge to move page-boundary rounding off glyphs
      el.style.paddingBottom = el.style.paddingBottom || '0.01mm';
    }
  }

  const cleanup = () => {
    window.removeEventListener('afterprint', cleanup);
    for (const [el, oldLH, oldPB] of touched) {
      el.style.lineHeight = oldLH;
      el.style.paddingBottom = oldPB;
    }
  };
  window.addEventListener('afterprint', cleanup);

  console.log(`Applied integer line-height to ${touched.length} elements. Opening print…`);
  window.print();
})();