打印的每页 HTML 脚注

Printed HTML per-page footnotes

本文关键字：HTML 脚注 打印      更新时间：2023-09-26

CSS3 GCPM 规范定义如下

<style>
 .footnote { float: footnote }
</style>
<p>A sentence consists of words. <span class="footnote">Most often.</span>.

渲染为

句子由单词组成。

¹ 最常见的是。[在(每个(页面的末尾]

打印

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

这正是我想做的，无论多么复杂，但据我所知，没有现代浏览器实现这个规范，也没有 css 分页规范。如果我愿意使用javascript，有什么方法可以达到这种效果吗？至少可以使用一些库生成pdf，但如果可能的话，我希望不要失去html(如浮点数等(的力量。

<小时 />

以防万一您想知道，笔记是

注释是放置在书籍或文档页面底部或章节、卷或整个文本末尾的文本字符串。

脚注是

。注释位于页面底部，而尾注则收集在章节、卷或整个作品末尾的单独标题下。

有关更多信息，请参阅有关排版注释的维基页面。

<小时 />

可以寻求解决方案的一个可能方向是计算单个页面的高度，在这种情况下，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>的。我认为对这种差异的解释(从而允许它的控制(就足够了。

我希望

这就是你要找的...它松散地基于这个答案，并针对特定用例进行了一些调整。

在我看来，css计数器是有趣的部分。

全屏结果<->打印预览工作示例

.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;
}

j查询位置和计数器： 

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

我玩了更多，打印预览在Firefox，Chrome和IE10中看起来不错，但在Safari中似乎有问题。

首先回答您关于页面高度的问题 27.9cm 与 26.1cm . 这可以归因于几个原因，至少包括以下几点：

  1. 您当前的打印机可能会强加其自己的不可打印边距，这是由其打印机制引起的。
    2. 您当前的浏览器为页眉和页脚等添加自己的边距，并且
  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. 通过使用
  2. 在每个打印大小的"页面"末尾插入当前页面脚注，将文档内容格式化为"页面"。 每页不需要特殊的手动插入<div>。
  3. 该解决方案不会拆分文本块，而是在现有文本块之间插入脚注(该解决方案支持扫描顶级<div>或<p>元素(。
  4. 我已经在Safari，Firefox和Chrome(仅限Mac(上对此进行了测试。

有关工作示例，请参阅小提琴。 Javascript比我想要的要复杂一些(92行(，它的工作原理是在恢复到正常布局之前，暂时让浏览器根据您指示的pageHeight和pageWidth布局页面。

更新：

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

更新的工作示例在这里：小提琴

或在此处全屏预览页面：仅结果页面

我一直在使用PrinceXML来做你所说的，它的缺点是你必须使用shell脚本将其安装在计算机上。

我和一位同事正在开发一个简单的应用程序，它基本上是一个html文本编辑器，但可以将html导出为PDF，带有目录，脚注运行头等等。

普林斯是我们迄今为止遇到的最好的。让我知道这是否不适合您。

相关文章：