如何强制HTML与EPUB文档中章节内容从奇数页开始？

break-before: right/recto 以及旧版 page-break-before: right 兼容性差的核心原因是主流浏览器打印引擎、EPUB2阅读器对CSS Paged Media模块的侧边分页规则实现度极低，仅少数专业排版类阅读器支持该属性，需用分层兼容方案解决。

方案1：优先补全兼容属性（改造成本最低） #

先补全不同规范的分页属性，优先让支持的设备原生生效：

.Chapter {
  padding-bottom: 30pt; /* 印刷场景优先用pt单位，兼容性远高于vh */
  /* 旧版分页属性，兼容EPUB2、老旧浏览器 */
  page-break-before: right !important;
  /* 新版标准属性，覆盖不同实现的别名 */
  break-before: right !important;
  break-before: recto !important;
}

该方案可以覆盖约30%的主流设备，比如Safari打印、Calibre内置阅读器、Kobo系列设备都支持该写法。

方案2：浏览器打印场景JS动态补空白页 #

如果是网页打印场景，用JS监听打印事件动态计算页码插入空白页，兼容性接近100%：

// 监听打印触发事件
window.matchMedia('print').addEventListener('change', e => {
  if (e.matches) {
    // 移除之前插入的所有空白页
    document.querySelectorAll('.dynamic-blank-page').forEach(el => el.remove());
    // 遍历所有章节元素
    document.querySelectorAll('.Chapter').forEach(chapter => {
      // 计算章节元素对应页码
      const pageHeight = window.innerHeight;
      const chapterOffsetTop = chapter.offsetTop;
      const currentPage = Math.ceil(chapterOffsetTop / pageHeight);
      // 若当前页码为奇数，插入空白页将章节推到下一个奇数页
      if (currentPage % 2 === 1) {
        const blankPage = document.createElement('div');
        blankPage.className = 'dynamic-blank-page';
        blankPage.style.cssText = 'page-break-after: always; height: 100vh; visibility: hidden; margin: 0; padding: 0;';
        chapter.before(blankPage);
      }
    })
  }
})

方案3：EPUB场景最稳妥通用方案 #

EPUB场景因为阅读器实现碎片化，兼容性最好的处理方式：

• 制作EPUB时直接在编辑工具（Sigil、Calibre编辑器）勾选「强制章节从奇数页开始」的导出选项，工具会自动根据目标EPUB版本插入适配的空白页，无需手动写CSS，兼容99%的阅读器。
• 如果需要手动控制，可以在需要从奇数页开启的章节前插入固定空白页元素：

<div class="blank-page" style="page-break-after: always; height: 100%; visibility: hidden;"></div>

内容的提问来源于stack exchange，提问作者RamiroPastor