如何使用 paged.js 确保我的封底内容打印在小册子的封底 [英] How do I make sure that my back page content prints on the back page of a booklet, using paged.js

问题描述

如果小册子是用折叠纸张打印的，则封底页码始终是 4 的倍数.如果内容不是 4 页的倍数，则封底页将在小册子内.

Given a booklet printed from folded sheets, the back page's number will always be a multiple of 4. If there aren't a multiple of 4 pages of content, the back page will be inside the booklet.

我的项目使用 Paged.js 进行布局和分页.(非常好！)它有一个 处理第一页的选择器，但不处理最后一页.

My project is using Paged.js for layout and pagination. (It's very good!) It has a selector that handles the first page, but not for the last page.

如何在文档末尾插入空白页，将最后一页的内容推到文档的背面?

How do I insert blank pages at the end of the document that push the content on the last page onto the back page of the document?

推荐答案

如果有人比我更有能力提供改进版本，我很乐意.我怀疑 breakToken 等可以解决很多问题.但是，这对我有用:

I'd love if someone more competent than me can offer an improved version of this. I suspect that there is a lot that breakToken etc. can fix. However, this works for me:

未分页的 html 包含一个具有 .back-page 类的 div.这里的策略是查看后页div所在的页码是否有可以被4整除的页码.如果不是，插入一个大的空div.

The unpaginated html contains a div with a class of .back-page. The strategy here is to look if the page number that the back-page div is on has a page number divisible by 4. If not, insert a big empty div.

window.PagedConfig = { auto: false };

document.addEventListener("DOMContentLoaded", function () {
  class MyHandler extends Paged.Handler {
    constructor(chunker, polisher, caller) {
      super(chunker, polisher, caller);
    }

    beforeParsed(content) {}
    afterParsed(parsed) {}
    beforePageLayout(page) {}

    afterPageLayout(pageFragment, page, breakToken) {
      bumpBackPageContentToRealBackPage(pageFragment);
    }

    afterRendered(pages) {}
  }
  Paged.registerHandlers(MyHandler);

  setTimeout(() => window.PagedPolyfill.preview(), 2000); // TODO: swap this for the promise version
});

function bumpBackPageContentToRealBackPage(pageFragment) {
  let backPage = pageFragment.querySelector(".back-page");
  if (backPage) {
    let pageNumberStr = backPage.closest(".pagedjs_page").dataset.pageNumber;
    let pageNumber = parseInt(pageNumberStr, 10);
    console.log("last page is on", pageNumber);
    if (pageNumber % 4 !== 0) {
      console.log("last page needs a nudge");
      let pageDiv = document.createElement("div");
      pageDiv.classList.add("end-vacat-page");
      backPage.parentElement.insertBefore(pageDiv, backPage);
    } else {
      console.log("All is well: last page will print on the back page");
    }
  }
}

CSS

.back-page {
  break-before: left;
}
.end-vacat-page {
  page-break-before: always;
  height: var(--pagedjs-pagebox-height);
}

这会触发重排，然后由于 Paged.js 的 polyfill 规则之一，后页必须在左侧页面上，因此它会再次撞击它，直到它位于左侧页面上.

This triggers a reflow, and then because the back page must be on a left hand page because of one of the Paged.js polyfill rules, it bumps it again until it's on a left hand page.

这篇关于如何使用 paged.js 确保我的封底内容打印在小册子的封底的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！