【问题标题】:Force footnotes to be on same page as its text reference强制脚注与其文本参考在同一页上
【发布时间】:2026-01-18 11:05:03
【问题描述】:

在 CSS 中,我试图弄清楚是否有编码使脚注始终(或至少开始)与正文中的相应编号位于同一页面上。我目前正在体验一个程序(Pressbooks),有时脚注会出现在正文中的编号之后的页面上。当脚注编号位于正文最后四行的任何位置时,就会发生这种情况。您可能建议修复任何编码?

下面是相关编码:

@page {
  @footnotes {
    border-top-style:solid;
    border-top-width:thin;
    border-top-color:black;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-top: 0.5em; } }

.footnote {
  font-size: 0.75em;
  display: footnote;
  display: prince-footnote;
  position: footnote;
  counter-increment: footnote;
  footnote-style-position: inside;
  margin: 0 0 5px 5px;
  padding-left: 0px;
  text-indent: -10px;
  line-height: 1.4;
  text-align: left; }

.footnote {
  font-size: 0.875em;
  display: footnote;
  display: prince-footnote;
  prince-footnote-policy: keep-with-line;
  position: footnote;
  counter-increment: footnote;
  footnote-style-position: inside;
  margin-left: 0px;
  line-height: 1.4;
  text-indent: 0em;
  text-align: justify; }

【问题讨论】:

  • 这不是电子书中的 CSS 功能(我假设这是为了),即使它是电子书阅读器的本质,通常也会排除它,因为页面长度会根据用户设置和设备软件。
  • 这个程序提供了导出为电子书的选项,也可以导出为 pdf(用于按需打印)。我关心的是后者。

标签: css footnotes


【解决方案1】:

this comprehensive article about print design with css (paragraph about footnotes) 中所述,您可以使用此 CSS 将脚注移动到其被引用的同一页面的脚注区域:

.footnote {
  float: footnote;
}

这是您使用 CSS 正确定义脚注的方式,但是程序(浏览器或打印预生产应用程序)可能总是会误解它。

【讨论】:

  • 我试过这个,不幸的是无济于事。对此我束手无策。
  • @Ryan:这可能是解释器的“错误”或功能,然后......我能想到的至少测试它是添加一个荒谬的底部边距或填充到页面布局,看看这是否让解释器感到困惑,但这纯粹是一个猜测......您也可以尝试在脚注中添加一个计数器来调试解释器认为相应脚注属于哪个页面 - 如果它是一个错误在程序。那时,您可能想联系程序制造商(或在 SO 上找到其他有经验的人 - 为此,我会相应地标记您的帖子)
  • 我已经包含了上面的编码。我怀疑你是对的,这里是口译员的错。