    <style>
      @page {
          size: A4;
          margin: 0;
      }
      @media not print {
        #main {
          background-size: cover;
        }
      }
      html, body {
          margin: 0;
          width: 210mm;
          height: 297mm;
          font-size: 14px;
      }
      #main {
          height: 100%;
          width: 100%;
          position: relative;
          overflow: hidden;
      }
      .float {
          position: absolute;
          white-space: nowrap;
          height: 4.3mm;  /* default */
          /* overflow: hidden; */
          /* text-overflow: ellipsis; */
      }
      .light-box {
          outline: 1px solid black;
          outline-offset: -0.5px;
      }
      .heavy-box {
          outline: 3px solid black;
          outline-offset: -1.5px;
      }
      .multiline-pre {
          white-space: pre !important;
      }
      .multiline-wrap {
          white-space: break-spaces;
      }
      @media (min-width: 10000px) { /* Set this to 1 px to show debug lines */
          #main { outline: 1px solid red; outline-offset: -0.5px; }
          .float { outline: 1px solid blue; outline-offset: -0.5px; }
      }
    </style>
    <script>
      const prune = () => {
        const { width, height } = document.body.getBoundingClientRect()

        for (const span of [...document.getElementsByClassName('float')]) {
          const { x, y } = span.getBoundingClientRect()

          if (x > width || y > height) {
            console.log('Removing span; it is not in the page', span)
            span.remove()
          }
        }
      }
    </script>
