Element is duplicated with "page-break-after: avoid"
Here's a "minimal" example to reproduce this issue:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="UTF-8">
<style>
html {
font-size: 14px;
}
@page {
margin: 0.15in 0.67in 0.5in 0.67in;
size: A4;
}
h2 {
page-break-after: avoid
}
</style>
<script src="https://unpkg.com/pagedjs@0.1.34/dist/paged.polyfill.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="article">
<div class="title-document">
<h1>AsciiDoc Versus Markdown</h1>
</div>
<div id="content" class="content">
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>The most compelling reason to choose a lightweight markup language for writing is to minimize the number of technical concepts an author must grasp in order to be immediately productive.
In other words, the goal is to be able to <em>write without friction</em>.</p>
</div>
<div class="paragraph">
<p>A popular choice is Markdown.
(At least, that’s what you call it in the beginning).
The main advantage of Markdown lies in its primitive syntax: its manual and cheatsheet are one and the same.
But this advantage is also its greatest shortcoming.</p>
</div>
<div class="paragraph">
<p>As soon as authors need something slightly more complex (tables, cross references, footnotes, embedded YouTube videos, etc.), they find themselves diving directly into HTML or seeking out alternative implementations.
Markdown has become a maze of different implementations, termed “flavors”, which make a universal definition evasive.</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<div class="title">Note</div>
</td>
<td class="content">
The IETF has declared “there is no such thing as "invalid" Markdown.”
See <a href="https://tools.ietf.org/html/rfc7763#section-1.1" target="_blank" rel="noopener">This Is Markdown! Or: Markup and Its Discontents</a>.
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>Here’s how the story inevitably goes.
You start out with Markdown.
Then it’s Markdown + X.
Then Markdown + X + Y.
And down the rabbit hole you go.
What’s worse, X and Y often take the form of HTML, unnecessarily coupling content with presentation and wrecking portability.
Your instinct to choose Markdown is good.
There are just better options.</p>
</div>
<div class="paragraph">
<p>AsciiDoc presents a more sound alternative.
The AsciiDoc syntax is more concise than (or at least as concise as) Markdown.
At the same time, AsciiDoc offers power and flexibility without requiring the use of HTML or “flavors” for essential syntax such as tables, definition lists, admonitions (tips, notes, warnings, etc.) and table of contents.</p>
</div>
<div class="paragraph">
<p>It’s important to understand that AsciiDoc was initially designed as a plain-text alternative to the DocBook XML schema.
AsciiDoc isn’t stuck in a game of whack-a-mole trying to satisfy publishing needs like Markdown.
Rather, the AsciiDoc syntax was explicitly designed with the needs of publishing in mind, both print and web.
If the need arises, you can make full use of the huge choice of tools available for a DocBook workflow using Asciidoctor’s DocBook converter.
That’s why mapping to an enterprise documentation format like DocBook remains a key use case for AsciiDoc.</p>
</div>
<div class="paragraph">
<p>And yet, AsciiDoc is simple enough to stand in as a better flavor of Markdown.
But what truly makes AsciiDoc the right investment is that its syntax was designed to be extended as a core feature.
This extensibility not only means that AsciiDoc has a more to offer, with room to grow, it also fulfills the objective of ensuring your content is maximally reusable.</p>
<p>And yet, AsciiDoc is simple enough to stand in as a better flavor of Markdown.
But what truly makes AsciiDoc the right investment is that its syntax was designed to be extended as a core feature.
This extensibility not only means that AsciiDoc has a more to offer, with room to grow, it also fulfills the objective of ensuring your content is maximally reusable.</p>
<p>And yet, AsciiDoc is simple enough to stand in as a better flavor of Markdown.
But what truly makes AsciiDoc the right investment is that its syntax was designed to be extended as a core feature.
This extensibility not only means that AsciiDoc has a more to offer, with room to grow, it also fulfills the objective of ensuring your content is maximally reusable.</p>
<p>And yet, AsciiDoc is simple enough to stand in as a better flavor of Markdown.
But what truly makes AsciiDoc the right investment is that its syntax was designed to be extended as a core feature.
This extensibility not only means that AsciiDoc has a more to offer, with room to grow, it also fulfills the objective of ensuring your content is maximally reusable.</p>
<p>And yet, AsciiDoc is simple enough to stand in as a better flavor of Markdown.
But what truly makes AsciiDoc the right investment is that its syntax was designed to be extended as a core feature.
This extensibility not only means that AsciiDoc has a more to offer, with room to grow, it also fulfills the objective of ensuring your content is maximally reusable.</p>
<p>And yet, AsciiDoc is simple enough to stand in as a better flavor of Markdown.
But what truly makes AsciiDoc the right investment is that its syntax was designed to be extended as.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_comparison_by_example">Comparison by example</h2>
<div class="sectionbody">
<div class="paragraph">
<p>The following table shows the AsciiDoc syntax as it compares to Markdown.
Since AsciiDoc supports a broader range of syntax than Markdown, this side-by-side comparison focuses mainly on areas where the syntax overlaps.</p>
</div>
</div>
</div>
</div>
</body>
As you can see there's only one <h2 id="_comparison_by_example">Comparison by example</h2>
element but the element is duplicated: