我有2列的布局供打印。h2–5位于该列内，而h1s跨两列。我正在使用Paged.js进行分页。

这两个页面显示了可接受的布局：

但是，如果情况是标题位于一列的底部，我希望将标题强制到下一列的顶部。

如果一篇新文章从页面底部的40％开始，我也希望将其强制到下一页。

对于h2及以下，我在标题上方插入div，如果该标题位于其列的底部，则将其充气以推入下一列。

这似乎可以完成h2–5的工作，因为它们位于由浏览器管理的流中。但前提是它们在左列中；如果它们在右边，则会从页面上撞掉。例如：

将H1撞出页面会导致问题，填充物膨胀，但将标题推到不可见的区域或其他一些奇怪的情况。

第一张图片显示了第二张图片中显示的标题，该标题不在页面上填充。

以下（略微简化）的标记生成了第11页（右图，第二幅图）

<div class="the-articles">
  <article class="architectural-review.com paper-story noted">
    <p>
      No question, Rem is a genius. Nonetheless, his wake is toxic: stained by
      Randian egos (both triumphal and crushed), the intense interpersonal
      competition, and the exploitation of intellectual and manual labour. How
      does it all end, you wonder. In some ways, Tomas Koolhaas’s documentary
      was a preemptive eulogy. Death is present in every shot, tugging at the
      great man’s sleeve. The film is also suffused by an intense melancholy. It
      is the peculiar sadness of endings: when a family line is extinguished,
      when change erases beauty and meaning, when an entire world order
      disintegrates.
    </p>
    <p>
      Starchitects are still with us, even though their era is over. Koolhaas
      himself called time on it in the mid-2000s. It is no contradiction to
      honour them, while admitting that we must give ourselves permission to
      abandon the figure of the heroic architect, and along with it the Western
      blueprint for greatness that Koolhaas has so relentlessly and obsessively
      perfected.
    </p>
    <div class="tail-meta">
      From:
      <span class="url"
        >https://www.architectural‑review.com/essays/reputations/rem‑koolhaas‑1944/10037224.article</span
      >
    </div>
    <!-- SHIM IS HERE -->
    <div class="shim-between-articles" style="height: 181.944px;"></div>
  </article>
  <article id="2415273718" class="newyorker.com paper-story noted">
    <h1 class="article-title" id="h2415273718">
      Love Is Not a Permanent State of Enthusiasm: An Interview with Esther
      Perel
    </h1>
  </article>
</div>

我在里面做shim-inflation afterPageLayout，它调用此函数：

function identifyTooCloseToBottomHeading(
  theHeading,
  pageCutoffPercentage,
  page,
  pageFragment
) {
  try {
    if (theHeading !== null && theHeading !== undefined) {
      const pageBox = page.element.getBoundingClientRect();
      const headingBox = theHeading.getBoundingClientRect();
      const pdelta = pageBox.bottom - headingBox.bottom;
      const botPC = pdelta / pageBox.height; //Gives a % up the page. I.e. 100% is the top
      const cutPC = pageCutoffPercentage[theHeading.tagName.toLowerCase()];
      const oneRem = parseFloat(
        getComputedStyle(document.documentElement).fontSize
      );
      if (botPC < cutPC) {
        console.log("at risk", theHeading);
        if (theHeading.previousElementSibling) {
          AdjustShimSize(oneRem);
        } else {
          const thisArticle = theHeading.parentElement;
          const prevArticle = thisArticle.previousElementSibling;
          const shim = prevArticle.querySelector(".shim-between-articles");
          const topMetaBox = thisArticle
            .querySelector(".top-meta")
            .getBoundingClientRect();
          shim.style.height = `${
            theHeading.getBoundingClientRect().height + topMetaBox.height
          }px`;
        }
      }
    }
  } catch (e) {
    console.log(e, theHeading);
  }

  function AdjustShimSize(oneRem) {
    const shim = theHeading.previousElementSibling;
    // calculate the height that it needs to be
    try {
      const shimBox = shim.getBoundingClientRect();
      const container = shim.closest(".the-articles");
      const containerBox = container.getBoundingClientRect();
      // logShimDetails(theHeading, container, shimBox, nextElBox, containerBox, oneRem);
      shim.style.height = `${containerBox.bottom - shimBox.bottom - oneRem}px`;
      console.log("shimmed", theHeading);
    } catch {
      console.log("trouble with", theHeading);
    }
  }
}

这似乎应该起作用，但是它不是很优雅。我怀疑可以对我做些什么breaktoken？有正确的方法吗？

对于H1，我还尝试了在上面的文章中添加一个类，具体取决于将标题翻到下一页需要多少行。即一系列CSS规则：

.n-line-fat-bottom-20 {
  margin-bottom: calc(var(--wp-line-height) * 20) !important;
}
.n-line-fat-bottom-22 {
  margin-bottom: calc(var(--wp-line-height) * 24) !important;
}

然后在Paged.js生命周期的同一点应用该类。它具有类似的无用结果。

如果我提前知道需要打破哪个标题，我可以给它们定一个break-before: column;或break-before: page;规则，但是根据内容却无法提前知道。在事实之后添加这些规则似乎不适用于paged.js的生命周期。我怀疑这是一个生命周期问题，因为如果我在正确的位置/正确的处理程序中执行该操作，则将内容从页面中推送出去会导致下一页的重排。

解决方案

暂无回答