diff --git a/.gitignore b/.gitignore index c5fc77bb..c4d3a101 100644 --- 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 new file mode 100644 index 00000000..74a696a1 --- /dev/null +++ b/_archive/footnotes-handwritten/README.md @@ -0,0 +1,124 @@ +# 脚注ガイド スクリーンショット撮影環境 + +`content/{en,ja}/cookbook/footnotes.md` に埋め込むスクリーンショットを +撮影するためのソース HTML を置く作業ディレクトリです。 + +## 設計方針 + +- **ページサイズを意図的に小さく設定**（140mm × 90mm 程度の短冊型）して、 + 「本文の参照位置 + 脚注エリア」だけが 1 ページに収まるようにしてある。 + 撮影時は **ページ全体** を撮るだけで OK。トリミング作業が不要になり、 + ファイルサイズも自然に抑えられる。 +- 各 HTML は完全自己完結（CSS は ` + + +

A footnote written directly in HTML as <span class="footnote">The footnote body. float: footnote moves it to the page-bottom area at layout time. is moved to the page-bottom footnote area at layout time, thanks to a theme (theme-base / theme-techbook) that defines .footnote { float: footnote }.

+

Multiple references in the same paragraphA second note. Numbering is automatic. share an auto-incrementing counter, generated by the ::footnote-call and ::footnote-marker pseudo-elements.

+ + diff --git a/_archive/footnotes-handwritten/en/02-vfm-pandoc-endnotes.html b/_archive/footnotes-handwritten/en/02-vfm-pandoc-endnotes.html new file mode 100644 index 00000000..ad33993c --- /dev/null +++ b/_archive/footnotes-handwritten/en/02-vfm-pandoc-endnotes.html @@ -0,0 +1,39 @@ + + + + +Example 2: VFM Pandoc-style endnotes + + + +

VFM's default setting (footnote: 'pandoc') renders [^1] as a <section role="doc-endnotes"> appended to the end of the document1.

+

Because endnotes flow inline with the main text, they are not subject to float: footnote, and @page { @footnote { } } styling has no effect on them2.

+
+
    +
  1. First endnote body. ↩
    2. +
  2. Second endnote body. ↩
    3. +
+
+ + diff --git a/_archive/footnotes-handwritten/en/03-dpub-aria-default.html b/_archive/footnotes-handwritten/en/03-dpub-aria-default.html new file mode 100644 index 00000000..fbbeb80b --- /dev/null +++ b/_archive/footnotes-handwritten/en/03-dpub-aria-default.html @@ -0,0 +1,31 @@ + + + + +Example 3: DPUB-ARIA footnote (no theme CSS, minimal marker styling) + + + +

Place an inline reference using <a role="doc-noteref">1 and the corresponding <aside role="doc-footnote"> elsewhere in the flow.

+ +

Vivliostyle.js v2.41.0+ applies float: footnote automatically through its built-in UA stylesheet, so the note is placed in the page-bottom area without any theme CSS2.

+ + + diff --git a/_archive/footnotes-handwritten/en/04-page-footnote-styled.html b/_archive/footnotes-handwritten/en/04-page-footnote-styled.html new file mode 100644 index 00000000..b127ad55 --- /dev/null +++ b/_archive/footnotes-handwritten/en/04-page-footnote-styled.html @@ -0,0 +1,46 @@ + + + + +Example 4: Custom styling via @page { @footnote { … } } + + + +

This example styles the footnote area with @page { @footnote { … } }1, applying a top border, padding, and a generated "Notes" heading via ::before.

+ +

With multiple notes2, the heading appears once for the entire footnote area, not per note.

+ + + diff --git a/_archive/footnotes-handwritten/en/05-footnote-display-inline.html b/_archive/footnotes-handwritten/en/05-footnote-display-inline.html new file mode 100644 index 00000000..a6aadf2c --- /dev/null +++ b/_archive/footnotes-handwritten/en/05-footnote-display-inline.html @@ -0,0 +1,30 @@ + + + + +Example 5: footnote-display: inline + + + +
+

With footnote-display: inline, multiple footnotes flow on the same line1. Three short references2 in a row3 still keep the footnote area compact in the vertical direction.

+ + + +
+ + diff --git a/_archive/footnotes-handwritten/en/06-footnote-display-compact.html b/_archive/footnotes-handwritten/en/06-footnote-display-compact.html new file mode 100644 index 00000000..84851f88 --- /dev/null +++ b/_archive/footnotes-handwritten/en/06-footnote-display-compact.html @@ -0,0 +1,33 @@ + + + + +Example 6: footnote-display: compact + + + +
+

footnote-display: compact packs short notes inline1 as unbreakable units2, with following short notes joining the same run3. A note that does not fit on one rendered line falls back to block automatically4.

+ + + + +
+ + diff --git a/_archive/footnotes-handwritten/en/07-footnote-marker-outside.html b/_archive/footnotes-handwritten/en/07-footnote-marker-outside.html new file mode 100644 index 00000000..19096d7d --- /dev/null +++ b/_archive/footnotes-handwritten/en/07-footnote-marker-outside.html @@ -0,0 +1,51 @@ + + + + +Example 7: ::footnote-marker with list-style-position: outside + + + +

Setting list-style-position: outside on ::footnote-marker places the marker outside the footnote body1. Continuation lines align with the body's left edge rather than under the marker2, which makes long footnotes easier to read.

+ + + + diff --git a/_archive/footnotes-handwritten/ja/01-html-class-themebase.html b/_archive/footnotes-handwritten/ja/01-html-class-themebase.html new file mode 100644 index 00000000..67be9da9 --- /dev/null +++ b/_archive/footnotes-handwritten/ja/01-html-class-themebase.html @@ -0,0 +1,40 @@ + + + + +例 1: HTML 直書き脚注（GCPM クラス方式） + + + +

HTML 中に <span class="footnote"> として記述した脚注脚注の本文。float: footnote によりレイアウト時にページ下部に移動される。は、テーマ CSS（theme-base / theme-techbook など）の .footnote { float: footnote } によってページ下部の脚注エリアに送られる。

+

本文中に複数の参照を入れた場合もう一つの注。連番は自動的に振られる。でも、マーカーは ::footnote-call と ::footnote-marker 擬似要素で連番つきに生成される。

+ + diff --git a/_archive/footnotes-handwritten/ja/02-vfm-pandoc-endnotes.html b/_archive/footnotes-handwritten/ja/02-vfm-pandoc-endnotes.html new file mode 100644 index 00000000..4b3b3462 --- /dev/null +++ b/_archive/footnotes-handwritten/ja/02-vfm-pandoc-endnotes.html @@ -0,0 +1,39 @@ + + + + +例 2: VFM Pandoc 形式の後注 + + + +

VFM のデフォルト設定（footnote: 'pandoc'）では、[^1] 記法は <section role="doc-endnotes"> として本文末尾に追加される1。

+

本文と通常フローでつながるため、float: footnote や @page { @footnote { } } の対象にならない2点に注意。

+
+
    +
  1. 最初の後注の本文。↩
    2. +
  2. 次の後注の本文。↩
    3. +
+
+ + diff --git a/_archive/footnotes-handwritten/ja/03-dpub-aria-default.html b/_archive/footnotes-handwritten/ja/03-dpub-aria-default.html new file mode 100644 index 00000000..2111033b --- /dev/null +++ b/_archive/footnotes-handwritten/ja/03-dpub-aria-default.html @@ -0,0 +1,29 @@ + + + + +例 3: DPUB-ARIA 脚注（テーマ CSS なし、マーカー表示は最小限） + + + +

本文中に <a role="doc-noteref"> で参照1を入れ、別の場所に <aside role="doc-footnote"> を置く。

+ +

Vivliostyle.js v2.41.0+ のビルトイン UA スタイルが float: footnote を自動で適用するため、テーマ CSS なしでもページ下部の脚注エリアに配置される2。

+ + + diff --git a/_archive/footnotes-handwritten/ja/04-page-footnote-styled.html b/_archive/footnotes-handwritten/ja/04-page-footnote-styled.html new file mode 100644 index 00000000..a4210266 --- /dev/null +++ b/_archive/footnotes-handwritten/ja/04-page-footnote-styled.html @@ -0,0 +1,45 @@ + + + + +例 4: @page { @footnote { … } } によるカスタムスタイル + + + +

@page { @footnote { … } } で脚注エリアにスタイルを与える例1。上罫線・字下げ・::before による「脚注:」見出しを生成している。

+ +

複数の注がある場合2、見出しはエリア全体に対して 1 度だけ表示される。

+ + + diff --git a/_archive/footnotes-handwritten/ja/05-footnote-display-inline.html b/_archive/footnotes-handwritten/ja/05-footnote-display-inline.html new file mode 100644 index 00000000..2e3455bf --- /dev/null +++ b/_archive/footnotes-handwritten/ja/05-footnote-display-inline.html @@ -0,0 +1,30 @@ + + + + +例 5: footnote-display: inline + + + +
+

footnote-display: inline を指定すると、複数の脚注が同じ行に流れ込む1。本文中の参照を 3 つ並べた場合2でも、脚注エリアの縦方向のスペース消費が抑えられる3。

+ + + +
+ + diff --git a/_archive/footnotes-handwritten/ja/06-footnote-display-compact.html b/_archive/footnotes-handwritten/ja/06-footnote-display-compact.html new file mode 100644 index 00000000..55844fd4 --- /dev/null +++ b/_archive/footnotes-handwritten/ja/06-footnote-display-compact.html @@ -0,0 +1,33 @@ + + + + +例 6: footnote-display: compact + + + +
+

footnote-display: compact は、短い脚注はインライン1でまとまって流れ2、続く短い注も同じ行に並ぶ3。一方で 1 行に収まらない長い注は自動でブロック扱いになる4。

+ + + + +
+ + diff --git a/_archive/footnotes-handwritten/ja/07-footnote-marker-outside.html b/_archive/footnotes-handwritten/ja/07-footnote-marker-outside.html new file mode 100644 index 00000000..f34413e2 --- /dev/null +++ b/_archive/footnotes-handwritten/ja/07-footnote-marker-outside.html @@ -0,0 +1,50 @@ + + + + +例 7: ::footnote-marker の list-style-position: outside + + + +

::footnote-marker に list-style-position: outside を指定すると、マーカーが本文の外側にぶら下がる1。複数行にわたる脚注の継続行が、番号の下ではなく本文の左端に揃って読みやすくなる2のが利点。

+ + + + diff --git a/_investigation/footnote-display-inline.md b/_investigation/footnote-display-inline.md new file mode 100644 index 00000000..996ce3a2 --- /dev/null +++ b/_investigation/footnote-display-inline.md @@ -0,0 +1,216 @@ +# `footnote-display: inline` が author CSS から効かない件 + +Vivliostyle.js のドキュメントサイトで脚注ガイド記事のスクリーンショットを +撮影中に発見した問題のメモ。 + +## 環境 + +- `@vivliostyle/cli` **10.5.0** +- `@vivliostyle/viewer` **2.41.0** +- `@vivliostyle/core` **2.42.0**（CLI が依存） +- macOS / Chrome 経由 `vivliostyle preview` + +## 期待する挙動（CSS GCPM 3） + +```css +.footnote { + footnote-display: inline; +} +``` + +を指定すると、複数の DPUB-ARIA 脚注（`