Skip to content

Ordered list numbering is lost near page break

Consider the following example (you might need to tweak the page margin to break just after a list item):

<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<meta http-equiv="Content-Style-Type" content="text/css"/>
	<title>Issue #370</title>

	<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>

	<style>
		:root {
			font-size: 18px;
		}

		/* interface */

		@media screen {

			body {
				background: whitesmoke;
			}

			.pagedjs_page {
				background: white;
				margin-bottom: 10px;
				box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
			}

			.pagedjs_pages {
				width: calc(var(--pagedjs-width) * 2);
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: flex-start;
				margin: 0 auto;
			}
		}

		@page {
			size: A4;
			margin: 2mm 0;
		}
	</style>
</head>
<body>
<section class="chapter">
	<div id="content" class="content">
		<div class="qlist qanda">
			<ol>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
				<li>
					<p><em>This is a question?</em></p>
					<p>This is an answer.</p>
				</li>
			</ol>
		</div>
	</div>
</section>

</body>
</html>

You will get the following result:

image

As you can see, the number 15 is missing.
I can reproduce this issue on the main branch.