List marker is removed after a page break
Here's a simple reproduction case:
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<style>
@page {
size: 80mm 50mm;
margin: 12mm 12mm;
}
@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;
}
.pagedjs_first_page {
margin-left: 50%;
}
}
</style>
</head>
<body>
<section>
<ul>
<li><p>Item 1</p></li>
<li><p>Item 2</p></li>
<li><p>Item 3</p></li>
<li><p>Item 4</p></li>
<li><p>Item 5</p></li>
</ul>
</section>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
</body>
</html>
And here's the result:
As you can see, a bullet is missing before "Item 3" and "Item 5".
If I remove the following style then it's working as expected: https://gitlab.pagedmedia.org/tools/pagedjs/blob/e914af201e8b260c09080f0bdb95d1b22bdaec48/src/polisher/base.js#L614-616
I believe that this style was added to remove the list marker when the content of a given list item does not fit. For instance:
In the above screenshot, the sentence "Fusce lacinia..." is cut and we don't want to add a bullet on the next page because "...arcu et nulla. Nulla vitae mauris non felis mollis faucibus." is the end of the sentence (not an independent list item).
In short, we need to differentiate two cases:
- a list item is cut
- a complete list item is moved to the next page