16

CSS3 GCPM 规范定义了以下内容

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

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

呈现为

一个句子由单词组成。¹

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

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

这正是我想要做的，不管多么复杂，但据我所知，没有现代浏览器实现这个规范，也没有 css-paging 规范。如果我愿意使用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>的。我认为对这种差异的解释（从而允许其控制）就足够了。

4

3 回答 3

4

我希望这就是您要寻找的...它大致基于此答案，并针对特定用例进行了一些调整。

在我看来，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;
}

用于位置和计数器的 jQuery： 

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

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

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

于 2014-05-13T03:47:49.063 回答
4

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

  1. 您当前的打印机可能会由于其打印机制而施加其自己的不可打印边距。
  2. 您当前的浏览器为页眉和页脚等添加了自己的边距，并且可能会或可能不会根据用户是否选择抑制页眉和页脚来抑制这些边距。一些浏览器抑制，一些保留空间并将其空白。

这两个来源都不能供页面作者询问。

但...

我设法开发了一个 JQuery 解决方案，该解决方案将使脚注按应有的方式运行。

  1. 嵌入的脚注被提取、自动计数并替换为上标数字。IE：

    <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）上对此进行了测试。

有关工作示例，请参见小提琴。Javascript 比我想要的要复杂一些（92 行），它的工作原理是临时让浏览器根据您指示的 pageHeight 和 pageWidth 来布局页面，然后再恢复到正常布局。

更新：

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

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

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

于 2014-05-13T15:05:37.577 回答
1

我一直在使用PrinceXML来完成您所说的事情，它的缺点是您必须使用 shell 脚本将它安装在您的计算机上。

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

到目前为止，Prince 是我们遇到的最好的。让我知道这是否不适合您。

于 2014-05-11T02:38:53.673 回答