u1f992 · April 12, 2025 03:08
diff --git a/example.html b/example.html
 <!doctype html>
 <html lang="ja">

 <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        @page {
            size: A5;
        }

        figure {
            float-reference: page;
            float: bottom;
        }
        span {
            float: footnote;
        }
    </style>
 </head>

 <body>
    <figure>
        <svg style="max-width: 100%; height: auto;" xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
            <path d="M5,5 h490 v490 h-490 Z M0,0 L500,500 M500,0 L0,500" fill="none" stroke="black" stroke-width="10" />
            <rect x="180" y="220" width="140" height="60" fill="white" />
            <text x="250" y="275" font-size="60" text-anchor="middle" fill="black">
                ダミー
            </text>
        </svg>
        <figcaption>キャプション</figcaption>
    </figure>
    <p><code>{ float-reference: page; float: bottom; }</code>と<code>{ float footnote; }</code>が同ページにあるとき、<code>float: bottom;</code>は脚注エリアを考慮した本文領域の下部に表示されることを確認するデモです。この原稿には十分な長さがあり<span class="footnote">脚注</span>、図版上から始まり、ページ分割されます。この原稿には十分な長さがあり、図版上から始まり、ページ分割されます。この原稿には十分な長さがあり、図版上から始まり、ページ分割されます。この原稿には十分な長さがあり、図版上から始まり、ページ分割されます。</p>
 </body>

 </html>
	<!doctype html>
	<html lang="ja">

	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style>
	@page {
	size: A5;
	}

	figure {
	float-reference: page;
	float: bottom;
	}
	span {
	float: footnote;
	}
	</style>
	</head>

	<body>
	<figure>
	<svg style="max-width: 100%; height: auto;" xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
	<path d="M5,5 h490 v490 h-490 Z M0,0 L500,500 M500,0 L0,500" fill="none" stroke="black" stroke-width="10" />
	<rect x="180" y="220" width="140" height="60" fill="white" />
	<text x="250" y="275" font-size="60" text-anchor="middle" fill="black">
	ダミー
	</text>
	</svg>
	<figcaption>キャプション</figcaption>
	</figure>
	<p><code>{ float-reference: page; float: bottom; }</code>と<code>{ float footnote; }</code>が同ページにあるとき、<code>float: bottom;</code>は脚注エリアを考慮した本文領域の下部に表示されることを確認するデモです。この原稿には十分な長さがあり<span class="footnote">脚注</span>、図版上から始まり、ページ分割されます。この原稿には十分な長さがあり、図版上から始まり、ページ分割されます。この原稿には十分な長さがあり、図版上から始まり、ページ分割されます。この原稿には十分な長さがあり、図版上から始まり、ページ分割されます。</p>
	</body>

	</html>