CSS Paged Media中如何实现脚注标记与脚注调用的双向链接？

由于CSS Paged Media的W3C草案暂不支持原生反向脚注链接，我们可以通过HTML结构调整 + JavaScript自动生成链接 + CSS样式适配的组合方式来实现双向跳转，适配vivliostyle-cli的PDF生成流程。

步骤1：重构HTML结构 #

将脚注调用和脚注内容分离，方便后续JS处理：

<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <script src="footnote.js"></script>
</head>
<body>
  <p>第一段示例文本.<span class="footnote-call"></span></p>
  <p>第二段示例文本.<span class="footnote-call"></span></p>

  <!-- 脚注内容统一放在页面任意位置，float: footnote会自动将其移到对应页的页脚 -->
  <span class="footnote">第一个脚注的具体内容。</span>
  <span class="footnote">第二个脚注的具体内容。</span>
</body>
</html>

步骤2：编写JavaScript自动生成双向链接 #

创建footnote.js文件，自动为每个脚注配对调用点和内容，生成ID与双向链接：

document.addEventListener('DOMContentLoaded', () => {
  const footnoteCalls = document.querySelectorAll('.footnote-call');
  const footnotes = document.querySelectorAll('.footnote');

  footnoteCalls.forEach((callEl, index) => {
    // 生成唯一ID对
    const callId = `fn-call-${index + 1}`;
    const footnoteId = `fn-${index + 1}`;

    // 设置脚注调用点的ID，并包裹成正向链接
    callEl.id = callId;
    const forwardLink = document.createElement('a');
    forwardLink.href = `#${footnoteId}`;
    forwardLink.appendChild(callEl.cloneNode(true));
    callEl.replaceWith(forwardLink);

    // 设置脚注内容的ID，并插入反向链接
    const footnoteEl = footnotes[index];
    footnoteEl.id = footnoteId;
    const backLink = document.createElement('a');
    backLink.className = 'footnote-backlink';
    backLink.href = `#${callId}`;
    backLink.textContent = `↑${index + 1}`; // 用↑标记反向链接，同时保留编号
    footnoteEl.prepend(backLink);
  });
});

步骤3：调整CSS样式适配链接显示 #

修改原CSS，隐藏原生伪元素标记，让反向链接与脚注内容风格统一：

page {
    counter-reset: footnote 0;
}
 
@page {
    @footnote {
        float: bottom;
    }
}
 
span.footnote { 
    float: footnote; 
}
 
/* 处理正文的脚注调用链接样式 */
.footnote-call a::before {
    content: counter(footnote, decimal) " ";
    vertical-align: super;
    font-size: 0.8em;
    counter-increment: footnote;
}
 
/* 隐藏原生伪元素标记，改用JS生成的带链接标记 */
.footnote::footnote-marker {
    display: none;
}

/* 反向链接样式，模仿原标记的布局 */
.footnote-backlink {
    font-size: 14pt;
    display: inline-block;
    width: 2em;
    text-align: right;
    text-decoration: none;
    margin-right: 0.5em;
    color: inherit;
}

原理说明 #

1. JavaScript在页面加载时自动为每个脚注调用点和脚注内容分配配对的唯一ID，避免手动维护的麻烦。
2. 正向链接（正文→页脚）通过包裹脚注调用点实现，反向链接（页脚→正文）通过在脚注内容前插入带ID指向的链接实现。
3. CSS调整样式，让生成的链接与原生脚注标记的视觉效果一致，同时利用counter保持自动编号的功能。

注意事项 #

• 确保vivliostyle-cli在渲染时启用JavaScript支持（默认已启用，若有问题可检查配置）。
• 脚注调用点和脚注内容的顺序需一一对应，JS会按匹配的索引进行配对。

内容的提问来源于stack exchange，提问作者anghenfil