Vivliostyle.jsではページ末尾につく脚注として、CSS Generated Content for Paged Media Moduleに基づくfloat: footnote¹とEPUB属性による指定²が利用可能でした。Vivliostyle.js v2.41.0では、ここにDPUB-ARIA属性による指定³が加わります。

Markdownには、GitHubをはじめ多くの処理系で使用できるPHP Markdown Extra由来の脚注記法が存在します。Vivliostyle CLIに組み込まれているMarkdownであるVFMでは、Vivliostyle.jsの脚注機能とは特に関係のないPandocに似せた文末脚注を生成していました。

footnote-pandoc.md

Vivliostyle.jsではページ末尾につく脚注として、CSS Generated Content for Paged Media Moduleに基づく`float: footnote`[^css-gcpm-footnote]とEPUB属性による指定[^vivliostyle-supports-epub-type]が利用可能でした。Vivliostyle.js v2.41.0では、ここにDPUB-ARIA属性による指定[^dpub-aria]が加わります。

[^css-gcpm-footnote]: https://www.w3.org/TR/css-gcpm-3/#footnotes

[^vivliostyle-supports-epub-type]: https://github.com/vivliostyle/vivliostyle.js/issues/1363#issuecomment-2225024668

[^dpub-aria]: https://www.w3.org/TR/dpub-aria-1.1/#doc-footnote / https://www.w3.org/TR/dpub-aria-1.1/#doc-noteref

footnote-pandoc.html

<!DOCTYPE html><html lang="ja"><head>
    <meta charset="utf-8">
    <title>tmp.ld0popfukd</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <p>Vivliostyle.jsではページ末尾につく脚注として、CSS Generated Content for Paged Media Moduleに基づく<code>float: footnote</code><a id="fnref1" href="#fn1" class="footnote-ref" role="doc-noteref"><sup>1</sup></a>とEPUB属性による指定<a id="fnref2" href="#fn2" class="footnote-ref" role="doc-noteref"><sup>2</sup></a>が利用可能でした。Vivliostyle.js v2.41.0では、ここにDPUB-ARIA属性による指定<a id="fnref3" href="#fn3" class="footnote-ref" role="doc-noteref"><sup>3</sup></a>が加わります。</p>
    <section class="footnotes" role="doc-endnotes">
      <hr>
      <ol>
        <li id="fn1" role="doc-endnote"><a href="https://www.w3.org/TR/css-gcpm-3/#footnotes">https://www.w3.org/TR/css-gcpm-3/#footnotes</a><a href="#fnref1" class="footnote-back" role="doc-backlink">↩</a></li>
        <li id="fn2" role="doc-endnote"><a href="https://github.com/vivliostyle/vivliostyle.js/issues/1363#issuecomment-2225024668">https://github.com/vivliostyle/vivliostyle.js/issues/1363#issuecomment-2225024668</a><a href="#fnref2" class="footnote-back" role="doc-backlink">↩</a></li>
        <li id="fn3" role="doc-endnote"><a href="https://www.w3.org/TR/dpub-aria-1.1/#doc-footnote">https://www.w3.org/TR/dpub-aria-1.1/#doc-footnote</a> / <a href="https://www.w3.org/TR/dpub-aria-1.1/#doc-noteref">https://www.w3.org/TR/dpub-aria-1.1/#doc-noteref</a><a href="#fnref3" class="footnote-back" role="doc-backlink">↩</a></li>
      </ol>
    </section>
  

</body></html>

Vivliostyle.jsのアップデートに合わせて、VFMの脚注機能を拡張しました。footnoteオプションに"pandoc" | "gcpm" | "dpub"を指定することで、脚注記法から生成されるHTMLを切り替えることができます。なおVFM v2.6.0（CLI v10.5.0）の時点ではデフォルトは引き続きPandoc形式であり、設定しない場合の出力は変わりません。将来的にはDPUB形式をデフォルトにする方向で進めています。

Vivliostyle CLIでは、まずはvivliostyle.config.jsのvfmでオプションを設定できます。

vivliostyle.config.js

// @ts-check
import { defineConfig } from '@vivliostyle/cli';

export default defineConfig({
  language: "ja",
  entry: ["footnote-pandoc.md"],
  vfm: {
    footnote: "dpub"
  }
});

または次のようにYAML Frontmatterとして指定できます。

footnote-dpub.md

---
vfm:
  footnote: dpub  # | pandoc | gcpm
---

Vivliostyle.jsではページ末尾につく脚注として、……

footnote-dpub.html

<!DOCTYPE html><html lang="ja"><head>
    <meta charset="utf-8">
    <title>tmp.ld0popfukd</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <p>Vivliostyle.jsではページ末尾につく脚注として、CSS Generated Content for Paged Media Moduleに基づく<code>float: footnote</code><a id="fnref1" href="#fn1" class="footnote-ref" role="doc-noteref"><sup>1</sup></a>とEPUB属性による指定<a id="fnref2" href="#fn2" class="footnote-ref" role="doc-noteref"><sup>2</sup></a>が利用可能でした。Vivliostyle.js v2.41.0では、ここにDPUB-ARIA属性による指定<a id="fnref3" href="#fn3" class="footnote-ref" role="doc-noteref"><sup>3</sup></a>が加わります。</p>
    <aside id="fn1" class="footnote" role="doc-footnote"><a href="#fnref1" class="footnote-back" role="doc-backlink"><sup>1</sup></a><a href="https://www.w3.org/TR/css-gcpm-3/#footnotes">https://www.w3.org/TR/css-gcpm-3/#footnotes</a></aside>
    <aside id="fn2" class="footnote" role="doc-footnote"><a href="#fnref2" class="footnote-back" role="doc-backlink"><sup>2</sup></a><a href="https://github.com/vivliostyle/vivliostyle.js/issues/1363#issuecomment-2225024668">https://github.com/vivliostyle/vivliostyle.js/issues/1363#issuecomment-2225024668</a></aside>
    <aside id="fn3" class="footnote" role="doc-footnote"><a href="#fnref3" class="footnote-back" role="doc-backlink"><sup>3</sup></a><a href="https://www.w3.org/TR/dpub-aria-1.1/#doc-footnote">https://www.w3.org/TR/dpub-aria-1.1/#doc-footnote</a> / <a href="https://www.w3.org/TR/dpub-aria-1.1/#doc-noteref">https://www.w3.org/TR/dpub-aria-1.1/#doc-noteref</a></aside>
  

</body></html>

vivliostyle.config.jsで設定する方法では、JavaScriptでカスタム生成関数を与えることができます。例えばGCPM脚注で次の画像のようなスタイルはfloat: footnoteの要素の内部をラップすれば実現できます。

参考

footnote-gcpm-hanging-indent.html

<style>
@page {
  size: A5;
}
.footnote {
  float: footnote;
  text-indent: 0;
}
.footnote::footnote-call {
  content: "注" counter(footnote);
  font-size: 75%;
  vertical-align: top;
}
.footnote::footnote-marker {
  content: "注" counter(footnote);
  margin-inline-end: 1em;

  float: left;
}
.footnote-wrap {
  display: flow-root;
}
</style>

<p style="counter-reset: footnote 8">テキストです<span class="footnote"><span class="footnote-wrap">注9と注10では幅が違うが、左を揃えて全角アキのあとに続けてぶら下げインデントさせたい。</span></span><span class="footnote"><span class="footnote-wrap">マーカーのoutside指定とも違って微妙に難しい。何度も指定されているがこれ以外によい方法が思いついていない。</span></span>。</p>

この処理をカスタム関数で記述すると以下のようになります。スタイルのための文書の変形処理を分離しMarkdownはクリーンに保つことができます。

vivliostyle.config.js

// @ts-check
import { defineConfig } from "@vivliostyle/cli";

export default defineConfig({
  language: "ja",
  entry: ["footnote-gcpm-hanging-indent.md"],
  theme: "./theme",
  vfm: {
    footnote:
      /** @type {NonNullable<Parameters<import("@vivliostyle/cli").VFM>[0]>["footnote"]} */ ({
        mode: "gcpm",
        body: (h, props, children) =>
          h("span.footnote", props, h("span.footnote-wrap", ...children)),
      }),
  },
});

footnote-gcpm-hanging-indent.md

テキストです[^9][^10]。

[^9]: 注9と注10では幅が違うが、左を揃えて全角アキのあとに続けてぶら下げインデントさせたい。

[^10]: マーカーのoutside指定とも違って微妙に難しい。何度も指定されているがこれ以外によい方法が思いついていない。

CSS

theme/package.json

{
  "//": [
    "Vivliostyle CLIにテーマを認識させるためのpackage.json",
    "see https://github.com/vivliostyle/vivliostyle-cli/issues/517#issuecomment-2381590030",
    "",
    "`name`と`vivliostyle.theme.style`が必須",
    "see https://github.com/vivliostyle/vivliostyle-cli/blob/v10.5.0/src/config/resolve.ts#L525-L527",
    "see https://github.com/vivliostyle/vivliostyle-cli/blob/v10.5.0/src/processor/compile.ts#L69"
  ],
  "name": "theme",
  "vivliostyle": {
    "theme": {
      "style": "style.css"
    }
  }
}

theme/style.css

@page {
  size: A5;
}
body {
  counter-reset: footnote 8;
}
.footnote {
  float: footnote;
  text-indent: 0;
}
.footnote::footnote-call {
  content: "注" counter(footnote);
  font-size: 75%;
  vertical-align: top;
}
.footnote::footnote-marker {
  content: "注" counter(footnote);
  margin-inline-end: 1em;

  float: left;
}
.footnote-wrap {
  display: flow-root;
}