vivliostyle · ogwata · May 5, 2026 · May 5, 2026 · May 5, 2026 · May 5, 2026
diff --git a/.gitignore b/.gitignore
@@ -29,6 +29,9 @@ pnpm-debug.log*
 # Vivliostyle temporary files
 .vivliostyle/
 
+# Vivliostyle preview (vite) cache
+.vite/
+
 # ビルド成果物（PDF / EPUB / WebPub）はリポジトリに含めない。
 # .github/workflows/deploy.yml が CI 側で `npm run build:formats` を実行して
 # dist/ に組み込み、GitHub Pages 配信時に同梱する。

diff --git a/_archive/footnotes-handwritten/README.md b/_archive/footnotes-handwritten/README.md
@@ -0,0 +1,124 @@
+# 脚注ガイド スクリーンショット撮影環境
+
+`content/{en,ja}/cookbook/footnotes.md` に埋め込むスクリーンショットを
+撮影するためのソース HTML を置く作業ディレクトリです。
+
+## 設計方針
+
+- **ページサイズを意図的に小さく設定**（140mm × 90mm 程度の短冊型）して、
+  「本文の参照位置 + 脚注エリア」だけが 1 ページに収まるようにしてある。
+  撮影時は **ページ全体** を撮るだけで OK。トリミング作業が不要になり、
+  ファイルサイズも自然に抑えられる。
+- 各 HTML は完全自己完結（CSS は `<style>` 内にインライン）。Vivliostyle.js
+  v2.41.0+ で開けば、ガイド記事に対応する見え方を確認できる。
+
+## ディレクトリ構成
+
+```
+_screenshots/footnotes/
+├── README.md             ← このファイル
+├── en/                   ← 英語サンプル本文の HTML
+│   ├── 01-html-class-themebase.html
+│   ├── 02-vfm-pandoc-endnotes.html
+│   ├── 03-dpub-aria-default.html
+│   ├── 04-page-footnote-styled.html
+│   ├── 05-footnote-display-inline.html
+│   ├── 06-footnote-display-compact.html
+│   └── 07-footnote-marker-outside.html
+└── ja/                   ← 日本語サンプル本文の HTML
+    └── (same 7 files)
+```
+
+## 撮影手順
+
+### 1. ローカルで開く
+
+#### a) Vivliostyle CLI で個別プレビュー（推奨）
+
+```sh
+# 例: 日本語版の例 1 を開く
+npx vivliostyle preview _screenshots/footnotes/ja/01-html-class-themebase.html
+```
+
+ブラウザが自動で開く。プレビュー画面で「単ページ」表示にする。
+
+#### b) HTTP サーバ + Vivliostyle Viewer
+
+```sh
+npx http-server _screenshots/footnotes -p 8080
+```
+
+そのうえで Vivliostyle Viewer を以下の URL で開く:
+
+```
+https://vivliostyle.org/viewer/?src=http://localhost:8080/ja/01-html-class-themebase.html
+```
+
+### 2. 撮影
+
+- 短冊型のページ全体（本文 + 脚注エリア）を 1 枚に収める
+- 推奨フォーマット: **PNG**
+- 解像度: Retina 相当（DPR 2x）程度
+
+### 3. 保存先
+
+```
+public/cookbook/footnotes/
+├── en/
+│   ├── 01-html-class-themebase.png
+│   ├── …
+└── ja/
+    ├── 01-html-class-themebase.png
+    └── …
+```
+
+`public/` 以下に置くことで Astro のデプロイに含まれる。
+
+### 4. 記事への組み込み
+
+`content/{en,ja}/cookbook/footnotes.md` の該当セクションに以下のように
+追記:
+
+```markdown
+![Footnote rendered with theme-base CSS](/cookbook/footnotes/en/01-html-class-themebase.png)
+```
+
+```markdown
+![theme-base で描画された脚注](/cookbook/footnotes/ja/01-html-class-themebase.png)
+```
+
+Markdown への画像挿入作業は別ステップとして依頼してください。
+
+## サンプル一覧
+
+| #  | ファイル | デモする内容 | 対応する記事節 |
+|----|---------|-----------|--------------|
+| 01 | `01-html-class-themebase.html` | `<span class="footnote">` + GCPM クラス方式 | Part 2 §2 |
+| 02 | `02-vfm-pandoc-endnotes.html` | VFM Pandoc 形式の後注 | Part 2 §3 |
+| 03 | `03-dpub-aria-default.html` | DPUB-ARIA `<aside role="doc-footnote">`、テーマ CSS なし | Part 3 §5 |
+| 04 | `04-page-footnote-styled.html` | `@page { @footnote { … } }` と `::before` | Part 3 §7 |
+| 05 | `05-footnote-display-inline.html` | `footnote-display: inline` | Part 3 §8 |
+| 06 | `06-footnote-display-compact.html` | `footnote-display: compact` | Part 3 §8 |
+| 07 | `07-footnote-marker-outside.html` | `::footnote-marker` の `list-style-position: outside` | Part 3 §9 |
+
+## ページ寸法について
+
+各サンプルは以下で統一:
+
+```css
+@page {
+  size: 140mm 90mm;
+  margin: 12mm 14mm;
+}
+```
+
+A5 などより明らかに小さいので、撮影された画像も自然と小さく仕上がる。
+記事内に並べたときに本文を圧迫しないサイズを目指している。
+
+## 注意
+
+- これらの HTML は **記事内の文言と完全一致しません**。短冊サイズに収まる
+  量の本文に絞ってあります。
+- フォントは `Noto Serif JP` 系（日本語）/ `Source Serif Pro` 系（英語）を
+  指定。インストールされていない場合は OS 既定の serif にフォールバック
+  します。
diff --git a/_archive/footnotes-handwritten/en/01-html-class-themebase.html b/_archive/footnotes-handwritten/en/01-html-class-themebase.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Example 1: HTML class footnote (theme-base style)</title>
+<style>
+  @page { size: 140mm 90mm; margin: 12mm 14mm; }
+  body {
+    font-family: "Source Serif Pro", "Georgia", serif;
+    font-size: 10pt;
+    line-height: 1.55;
+    text-align: justify;
+  }
+  p { margin: 0 0 0.5em; }
+  code { font-size: 0.92em; }
+
+  /* GCPM class style (equivalent to what theme-base provides) */
+  .footnote { float: footnote; }
+  ::footnote-call {
+    content: counter(footnote);
+    font-size: 0.7em;
+    vertical-align: super;
+    line-height: 0;
+  }
+  ::footnote-marker { content: counter(footnote) ".  "; }
+  @page {
+    @footnote {
+      border-top: 0.4pt solid currentColor;
+      padding-top: 4pt;
+      font-size: 8.5pt;
+      line-height: 1.5;
+    }
+  }
+</style>
+</head>
+<body>
+<p>A footnote written directly in HTML as <code>&lt;span class="footnote"&gt;</code><span class="footnote">The footnote body. <code>float: footnote</code> moves it to the page-bottom area at layout time.</span> is moved to the page-bottom footnote area at layout time, thanks to a theme (theme-base / theme-techbook) that defines <code>.footnote { float: footnote }</code>.</p>
+<p>Multiple references in the same paragraph<span class="footnote">A second note. Numbering is automatic.</span> share an auto-incrementing counter, generated by the <code>::footnote-call</code> and <code>::footnote-marker</code> pseudo-elements.</p>
+</body>
+</html>
diff --git a/_archive/footnotes-handwritten/en/02-vfm-pandoc-endnotes.html b/_archive/footnotes-handwritten/en/02-vfm-pandoc-endnotes.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Example 2: VFM Pandoc-style endnotes</title>
+<style>
+  @page { size: 140mm 90mm; margin: 12mm 14mm; }
+  body {
+    font-family: "Source Serif Pro", "Georgia", serif;
+    font-size: 10pt;
+    line-height: 1.55;
+    text-align: justify;
+  }
+  p { margin: 0 0 0.5em; }
+  code { font-size: 0.92em; }
+  sup a { text-decoration: none; font-size: 0.75em; vertical-align: super; line-height: 0; }
+  /* Equivalent to <section role="doc-endnotes"> emitted by VFM in Pandoc mode */
+  section[role="doc-endnotes"] {
+    border-top: 0.4pt solid currentColor;
+    margin-top: 1.2em;
+    padding-top: 0.4em;
+    font-size: 8.5pt;
+    line-height: 1.5;
+  }
+  section[role="doc-endnotes"] ol { padding-left: 1.5em; margin: 0; }
+  section[role="doc-endnotes"] li { margin: 0.1em 0; }
+</style>
+</head>
+<body>
+<p>VFM's default setting (<code>footnote: 'pandoc'</code>) renders <code>[^1]</code> as a <code>&lt;section role="doc-endnotes"&gt;</code> appended to the end of the document<sup id="fnref1"><a href="#fn1">1</a></sup>.</p>
+<p>Because endnotes flow inline with the main text, they are not subject to <code>float: footnote</code>, and <code>@page { @footnote { } }</code> styling has no effect on them<sup id="fnref2"><a href="#fn2">2</a></sup>.</p>
+<section role="doc-endnotes">
+  <ol>
+    <li id="fn1">First endnote body. <a href="#fnref1" aria-label="back">↩</a></li>
+    <li id="fn2">Second endnote body. <a href="#fnref2" aria-label="back">↩</a></li>
+  </ol>
+</section>
+</body>
+</html>
diff --git a/_archive/footnotes-handwritten/en/03-dpub-aria-default.html b/_archive/footnotes-handwritten/en/03-dpub-aria-default.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Example 3: DPUB-ARIA footnote (no theme CSS, minimal marker styling)</title>
+<style>
+  @page { size: 140mm 90mm; margin: 12mm 14mm; }
+  body {
+    font-family: "Source Serif Pro", "Georgia", serif;
+    font-size: 10pt;
+    line-height: 1.55;
+    text-align: justify;
+  }
+  p { margin: 0 0 0.5em; }
+  code { font-size: 0.92em; }
+  /* No theme CSS and no @footnote rule. The UA stylesheet in
+     Vivliostyle.js v2.41.0+ floats [role="doc-footnote"] asides
+     into the @footnote area on its own.
+     The footnote-area marker is provided as plain HTML
+     (<sup>n</sup> inside each aside) rather than via author
+     CSS pseudo-elements, so the file truly has zero stylesheet
+     rules beyond page geometry and body typography. */
+</style>
+</head>
+<body>
+<p>Place an inline reference using <code>&lt;a role="doc-noteref"&gt;</code><a role="doc-noteref" href="#fn1">1</a> and the corresponding <code>&lt;aside role="doc-footnote"&gt;</code> elsewhere in the flow.</p>
+<aside id="fn1" role="doc-footnote"><sup>1</sup> The footnote body. No CSS has been written for this rendering.</aside>
+<p>Vivliostyle.js v2.41.0+ applies <code>float: footnote</code> automatically through its built-in UA stylesheet, so the note is placed in the page-bottom area without any theme CSS<a role="doc-noteref" href="#fn2">2</a>.</p>
+<aside id="fn2" role="doc-footnote"><sup>2</sup> A second note. Numbering is automatic.</aside>
+</body>
+</html>
diff --git a/_archive/footnotes-handwritten/en/04-page-footnote-styled.html b/_archive/footnotes-handwritten/en/04-page-footnote-styled.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Example 4: Custom styling via @page { @footnote { … } }</title>
+<style>
+  @page {
+    size: 140mm 90mm;
+    margin: 12mm 14mm;
+
+    @footnote {
+      border-top: 1pt solid #555;
+      padding-top: 6pt;
+      margin-top: 6pt;
+      font-size: 8.5pt;
+      line-height: 1.5;
+      color: #333;
+    }
+    /* The correct syntax is `@footnote ::before` (with a space).
+       Without the space, the @page block is invalid and silently
+       drops; the asides then stay in the body flow. */
+    @footnote ::before {
+      content: "Notes";
+      display: block;
+      font-weight: 600;
+      margin-bottom: 0.2em;
+      color: #555;
+    }
+  }
+  body {
+    font-family: "Source Serif Pro", "Georgia", serif;
+    font-size: 10pt;
+    line-height: 1.55;
+    text-align: justify;
+  }
+  p { margin: 0 0 0.5em; }
+  code { font-size: 0.92em; }
+</style>
+</head>
+<body>
+<p>This example styles the footnote area with <code>@page { @footnote { … } }</code><a role="doc-noteref" href="#fn1">1</a>, applying a top border, padding, and a generated "Notes" heading via <code>::before</code>.</p>
+<aside id="fn1" role="doc-footnote"><sup>1</sup> A styled footnote.</aside>
+<p>With multiple notes<a role="doc-noteref" href="#fn2">2</a>, the heading appears once for the entire footnote area, not per note.</p>
+<aside id="fn2" role="doc-footnote"><sup>2</sup> A second styled footnote.</aside>
+</body>
+</html>
diff --git a/_archive/footnotes-handwritten/en/05-footnote-display-inline.html b/_archive/footnotes-handwritten/en/05-footnote-display-inline.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Example 5: footnote-display: inline</title>
+<style>
+  @page {
+    size: 140mm 90mm;
+    margin: 12mm 14mm;
+  }
+  body {
+    font-family: "Source Serif Pro", "Georgia", serif;
+    font-size: 10pt;
+    line-height: 1.45;
+  }
+  p { margin: 0 0 0.5em; }
+  code { font-size: 0.92em; }
+  /* Same pattern as vivliostyle's dpub-footnote-display.html test. */
+  .footnote-display-inline .footnote { footnote-display: inline; }
+</style>
+</head>
+<body>
+<section class="footnote-display-inline">
+<p>With <code>footnote-display: inline</code>, multiple footnotes flow on the same line<a id="ref1" href="#fn1" class="footnote-ref" role="doc-noteref"><sup>1</sup></a>. Three short references<a id="ref2" href="#fn2" class="footnote-ref" role="doc-noteref"><sup>2</sup></a> in a row<a id="ref3" href="#fn3" class="footnote-ref" role="doc-noteref"><sup>3</sup></a> still keep the footnote area compact in the vertical direction.</p>
+<aside id="fn1" class="footnote" role="doc-footnote"><a href="#ref1" class="footnote-back" role="doc-backlink"><sup>1</sup></a>A short note.</aside>
+<aside id="fn2" class="footnote" role="doc-footnote"><a href="#ref2" class="footnote-back" role="doc-backlink"><sup>2</sup></a>Another short note.</aside>
+<aside id="fn3" class="footnote" role="doc-footnote"><a href="#ref3" class="footnote-back" role="doc-backlink"><sup>3</sup></a>A third short note.</aside>
+</section>
+</body>
+</html>
diff --git a/_archive/footnotes-handwritten/en/06-footnote-display-compact.html b/_archive/footnotes-handwritten/en/06-footnote-display-compact.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Example 6: footnote-display: compact</title>
+<style>
+  /* `compact` keeps short notes inline and falls back to block for
+     notes that don't fit on a single line. */
+  @page {
+    size: 140mm 90mm;
+    margin: 12mm 14mm;
+  }
+  body {
+    font-family: "Source Serif Pro", "Georgia", serif;
+    font-size: 10pt;
+    line-height: 1.45;
+  }
+  p { margin: 0 0 0.5em; }
+  code { font-size: 0.92em; }
+  /* Same pattern as vivliostyle's dpub-footnote-display.html test. */
+  .footnote-display-compact .footnote { footnote-display: compact; }
+</style>
+</head>
+<body>
+<section class="footnote-display-compact">
+<p><code>footnote-display: compact</code> packs short notes inline<a id="ref1" href="#fn1" class="footnote-ref" role="doc-noteref"><sup>1</sup></a> as unbreakable units<a id="ref2" href="#fn2" class="footnote-ref" role="doc-noteref"><sup>2</sup></a>, with following short notes joining the same run<a id="ref3" href="#fn3" class="footnote-ref" role="doc-noteref"><sup>3</sup></a>. A note that does not fit on one rendered line falls back to block automatically<a id="ref4" href="#fn4" class="footnote-ref" role="doc-noteref"><sup>4</sup></a>.</p>
+<aside id="fn1" class="footnote" role="doc-footnote"><a href="#ref1" class="footnote-back" role="doc-backlink"><sup>1</sup></a>A short note.</aside>
+<aside id="fn2" class="footnote" role="doc-footnote"><a href="#ref2" class="footnote-back" role="doc-backlink"><sup>2</sup></a>Another short note.</aside>
+<aside id="fn3" class="footnote" role="doc-footnote"><a href="#ref3" class="footnote-back" role="doc-backlink"><sup>3</sup></a>A third short note.</aside>
+<aside id="fn4" class="footnote" role="doc-footnote"><a href="#ref4" class="footnote-back" role="doc-backlink"><sup>4</sup></a>A longer note that cannot fit on one rendered inline line and therefore falls back to a block layout under `compact`.</aside>
+</section>
+</body>
+</html>