1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@u1f992(Koutaro Mukai)

Vivliostyle.js v2.41.0（CLI v10.5.0）の脚注機能をMarkdownで利用する

1
Last updated at Posted at 2026-04-15

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

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の要素の内部をラップすれば実現できます。

image.png

参考
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;
}

  1. https://www.w3.org/TR/css-gcpm-3/#footnotes ↩

  2. https://github.com/vivliostyle/vivliostyle.js/issues/1363#issuecomment-2225024668 ↩

  3. https://www.w3.org/TR/dpub-aria-1.1/#doc-footnote / https://www.w3.org/TR/dpub-aria-1.1/#doc-noteref ↩

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?