html - 打印 CSS 和 HTML 书籍

Question

好吧，假设我想只使用 HTML 和 CSS 写一本书。我将如何定义页眉和页脚(并在页脚中包含页码)？我将如何做到让分页符和边距显示在浏览器中(如预览模式)？

我知道这听起来像是我在要求某人为我编写代码，但我真的只需要方向来获取此类资源。我完全不知道我将如何开始做这样的事情。

解释我想在浏览器中显示什么；我希望能够像在 PDF 查看器中那样查看每个页面的小版本，基本上文本溢出会创建分页符:

我查看了@media print，但它没有任何用于创建页眉和页脚的钩子(Hook)。

我无法让它工作(来自 w3.org ):

title { position: running(header) }
@page { @top-center {
  content: element(header) }
}

我查看了 Boom! 中的代码, 打印效果很好，但在浏览器中显示效果不一样。

那么...现在有人可以/应该为此寻找一个好的起点吗？

Answer 1

这是我的解决方案:

<div id='document'>
    <div class='page'>
        <div class='header'></div>
        <div class='footer'></div>
        <div class='content'></div>
    </div>
</div>

一切都进去了<div id='document'> .对于每个 .page , .header , .footer , 和 .content具有适合页面的高度和宽度。

之后，我使用 JavaScript 删除了溢出到 div.content 之外的所有内容。 .然后我克隆了div.page , 更新了新页面标题内的页码 <div> , 并填写新页面的内容 <div> .

这一直重复，直到我有大约 100 页并且没有任何内容超出最后一页的内容 <div> .