每页打印的HTML脚注

Question

CSS3 GCPM spec定义了以下内容

<style>
 .footnote { float: footnote }
</style>

<p>A sentence consists of words. <span class="footnote">Most often.</span>.

呈现为

  

句子由单词组成。 ¹

     

¹最常见的。 [在（每个）页面的末尾]

打印时（也适用于屏幕媒体类型，但只要它适用于打印我很高兴）。

完全我想做什么，无论多么复杂，但据我所知，没有现代浏览器实现此规范，也没有css-paging规范。如果我愿意使用javascript，是否有任何方式来实现此效果。至少可以使用一些库生成pdf，但如果可能的话，我希望不会失去html的功能（像浮动等等）。

---

如果您想知道，请注意

  

注释是放在书本或文档页面底部或章节，卷或整个文本末尾的一串文本。

和脚注是

  

...页面底部的注释，而尾注是在章节，卷或整个作品结束时的单独标题下收集的。

有关详细信息，请参阅wikipage on notes in typography。

---

可以寻求解决方案的一个可能方向是计算单个页面的高度，在这种情况下，在29.7cm的预期高度与试验和误差高度之间注意到差异（至少在我的系统上） ）26.1cm，可以使用以下代码观察：

<style>
    @page{
        margin:0px;
        padding:0px;
    }
    html,body,*{
        margin:0px;
        padding:0px;
    }
    p{
        border:1px solid black;
        height:26.1cm;
    }
</style>

和几个空的<p>。我会考虑对这种差异的解释（从而允许它的控制）足够解决问题。

Answer 1

我希望这是你正在寻找的......它基于this answer松散地基于特定用例进行了一些调整。

在我看来，css counter是有趣的部分。

Full Screen Result＆lt; - 尝试打印预览 的 Working Example

HTML：

<div id="pagewrapper1">
    <p>Zombies<sup>1</sup> reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit, morbo vel maleficia? De Apocalypsi undead dictum mauris brains<sup>2</sup>. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror.<sup>3</sup>

    </p>
    <ol class="footnotes">
        <li>This is a foot note about Zombies.</li>
        <li>This is a foot note about Brains.</li>
        <li>This is a foot note about Horror.</li>
    </ol>
</div>
<div id="pagewrapper2">
    <p>Zombies<sup>4</sup> reversus ab inferno... and so on...

CSS：

*{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body, html {
    font-size: 1em;
    padding:0;
    margin:0;
    height:100%;
}
#pagewrapper1, #pagewrapper2 {
    position:relative;
    border: 1px solid #000;
    min-height:100%;
    -webkit-region-break-inside: avoid; /* added these bits to work out print issue */
    page-break-after: always;
    page-break-inside: avoid;
}
p {
    margin:20px;
}
sup {
    font-size: .6em;
}
ol.footnotes {
    list-style-type: none;
    margin-left: 3em;
    position: absolute;
    bottom:0;
}
ol.footnotes > li {
    counter-increment: customlistcounter;
}
ol.footnotes > li:before {
    content: counter(customlistcounter)" ";
    position:relative;
    top:-4px;
    font-size: .6em;
    width: 3em;
}

jQuery for position and counter：

$('#pagewrapper1, #pagewrapper2').css({
        'padding-bottom': $('.footnotes').height()
});

$('#pagewrapper2 ol.footnotes').css({
    'counter-reset': 'customlistcounter ' + $('#pagewrapper1 ol.footnotes li').size()
});

我已经在Firefox，Chrome和IE10中使用了这一点，打印预览看起来不错，但似乎在Safari中存在问题。

Answer 2

首先回答有关页面高度27.9cm与26.1cm的问题。这可归因于一些原因，包括至少以下内容：

1. 您当前的打印机可能会因其打印机制而导致其自身的不可打印边距。
2. 您当前的浏览器为页眉和页脚等添加了自己的边距，可能会也可能不会抑制这些边距，具体取决于用户是否选择禁止页眉和页脚。有些浏览器会抑制，有些会保留空格并将其删除。

页面作者无法使用这两个来源进行查询。

但是...

我已经设法开发了一个JQuery解决方案，它将获得脚注以表现他们应该的行为。

1. 提取嵌入式脚注，自动计数并替换为上标数字。即：

   <div>My first sentence consists of words<span class="footnote">My first footnote.</span></div>
   

   变为

   <div>My first sentence consists of words<sup>1</sup></div>
   

   带文字

   1 My first footnote.

   位于当前打印尺寸“页面”的底部。

2. 通过在每个打印大小的“页面”的末尾插入当前页脚注，将文档内容格式化为“页面”。每页不需要特殊的手动插入<div>。
3. 解决方案不会拆分文本块，而是在现有文本块之间插入脚注（该解决方案支持扫描顶级<div>或<p>元素）。
4. 我在Safari，Firefox和Chrome（仅限Mac）上测试了这个。

有关工作示例，请参阅fiddle。 Javascript比我想要的要复杂一些（92行），并且可以通过在恢复到正常布局之前暂时让浏览器根据指示的pageHeight和pageWidth来布局页面。

<强>更新：

我制作了一个更容易理解的版本，它融合了用于实现独立于浏览器的整页大小的技术@ apaul34208，但保留了嵌入式脚注提取和自动分页的每个页面的正确脚注以适合打印机的概念。这适用于Safari，Chrome和Firefox（仅在Mac上测试），不会更改A4和US Letter。分页符限制在<div>或<p>边界。感谢保罗。

更新的工作示例如下：fiddle

或全屏页面预览：result page only

Answer 3

我一直在使用PrinceXML来完成您正在谈论的内容，其缺点是您必须使用shell脚本在计算机上安装它。

一位同事和我正在开发一个简单的应用程序，它基本上是一个html文本编辑器，但可以将html导出为PDF格式，包含目录，脚注和所有内容。

普林斯是我们迄今为止遇到的最好的。如果这不适合您，请告诉我。