.Chapter {
padding-bottom: 30vh;
break-before: right !important;
}
The good news: chapters begin in their own page
The bad news: the expected behaviour
"Forces one or two page breaks right before the principal box, whichever will make the next page into a right page"
is blatantly ignored by the browser and any epub reader. Any way to fix this? Oh and break-before: recto won't work either.
To achieve what you want, you need to use a pollyfill, like paged.js.
I've created a minimal example using the pollyfill which achieves what you want. Put following code in a separate html file, then open it in Chrome and click on print button.
<!DOCTYPE html>
<html lang="en">
<head>
<link media="print" rel="stylesheet"
href="https://www.pagedjs.org/css/pagedjs/interface.min.9b2f873f23cdd2a5e7c0f7a444b030c5.css">
<script src="https://www.pagedjs.org/js/paged.polyfill.e35b32228f7c0ce277c05a9b4d3db5c5.js" type="module"></script>
<script>
window.PagedConfig = { auto: false };
window.addEventListener("load", function () {
if (document.querySelector('#print')) {
document.querySelector('#print').addEventListener("click", preview);
}
});
async function preview() {
await window.PagedPolyfill.preview();
window.print();
}
</script>
<style>
#print {
position: fixed;
z-index: 20000;
padding: .7em;
right: 10px;
top: 10px;
font-size: 1.5em;
background-color: greenyellow;
border: 1px dashed red;
}
.chapter {
border: 1px dotted green;
}
@media print {
h1 {
string-set: title content(text);
}
#print {
display: none;
}
@page {
size: A4;
@bottom-center {
content: "Page "counter(page) " of "counter(pages);
font-size: 4mm;
color: gray;
}
@top-left {
content: string(title);
color: gray;
font-size: 4mm;
}
}
@page :blank {
@top-left {
content: none;
}
}
.chapter {
border: none;
break-before: right;
}
}
</style>
</head>
<body>
<section class="chapter">
<h1>Chapter 1 abc</h1>1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eligendi velit dicta
sapiente
culpa dolor est officiis optio? Recusandae soluta iure minus quisquam magnam ullam vel eius facilis. Corrupti, sunt
dolores rerum corporis aliquid, ducimus Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis eum
nemo veniam est expedita modi nam quia, amet, quidem quam minima repellendus! Nihil voluptate cupiditate odit
impedit, a, nemo omnis aspernatur similique quasi labore unde accusamus! Numquam corporis, facere sunt porro
aspernatur perspiciatis facilis provident inventore eveniet quisquam voluptate obcaecati, nostrum ex modi, sint
doloremque unde aperiam? Vero eius illum ex ratione pariatur similique fugiat reprehenderit cupiditate neque error?
Dolorem ea quod, eveniet nemo repellat placeat omnis vitae quaerat, vero ipsa quas officia aperiam ipsum,
necessitatibus ullam pariatur! Commodi beatae corporis voluptas aliquam, doloribus molestias saepe neque placeat,
quae quam repudiandae, asperiores fugiat possimus a omnis. Obcaecati alias, iure dolore maxime voluptas minus
nesciunt repellat, officiis ab commodi quos ullam earum dolorum. Iusto culpa delectus consectetur pariatur aliquid
minus at fuga porro, quaerat, totam officiis ipsam ad nesciunt. Rem hic quisquam iure. Repudiandae quisquam quo
porro alias obcaecati ut aperiam veritatis laborum, quasi perferendis, tempora dolore? Dolorem aperiam accusantium
doloribus consequatur, autem earum. Dolor accusantium, labore quasi amet nisi totam quibusdam fugit a adipisci
distinctiosi veritatis optio natus quo, nulla repellat ad inventore assumenda omnis, nemo doloremque
minus sapiente modi possimus dolor rerum quidem nisi ea. Dolor harum neque aperiam, quidem saepe repellat voluptatum
ipsum placeat? Quibusdam, dolorem similique in alias nesciunt sunt recusandae libero fugiat quas quod architecto
consequatur ex qui exercitationem unde quidem nisi rerum totam asperiores ipsum. Ratione accusantium voluptates
debitis possimus minima animi? Cum, esse magnam illum placeat minus facilis voluptas sit dolore blanditiis quidem
dolores fugit facere aperiam saepe provident, fugiat consequatur voluptatem, tenetur reprehenderit nulla sunt earum.
Possimus eum, quos soluta aperiam explicabo laudantium beatae minima sed nisi quod dignissimos ullam obcaecati odio
cupiditate ad facere exercitationem nulla, facilis sapiente? Excepturi quo voluptate quisquam cumque, sed natus.
Blanditiis sapiente eligendi error sint et labore ducimus totam porro nobis voluptas voluptatem excepturi ratione
tempora facilis esse laudantium fuga modi consequatur, quisquam harum voluptates. Nostrum id sapiente veniam fugiat
similique beatae voluptate dolorem officia corrupti deleniti commodi doloribus, aliquam expedita libero ipsam
repellat. Nesciunt consequatur quos nihil qui. Dolores quas eius odit maxime maiores labore veniam qui vitae,
consequuntur ratione magnam soluta, totam saepe illo eveniet voluptatem beatae ullam a assumenda, aliquam temporibus
nemo excepturi quibusdam. Fuga natus, quis totam doloribus libero aliquid illum nobis aut. Voluptatum maxime laborum
sint numquam nostrum dolor magnam, dicta iste corporis amet eveniet laudantium alias blanditiis fugit, quidem vitae
quia deserunt beatae magni nemo temporibus ipsam. Repudiandae atque cupiditate nostrum neque nobis ipsam architecto
commodi voluptatum quaerat fuga, aut inventore corporis modi minima saepe ipsa eligendi? Dolor ab sapiente pariatur
doloremque nemo delectus at accusamus libero, cum dolore eligendi. Fugiat quis atque aperiam quisquam, culpa quae
labore tempora repellendus voluptate sunt, est aliquid eligendi ullam laborum doloremque rem ut quod excepturi
consequuntur eius dolore enim incidunt ipsa pariatur! Dolorem, porro provident consequatur accusantium quis quia
obcaecati sequi, distinctio iusto magnam aliquid dicta nemo culpa eveniet. Quasi fuga eaque, deleniti dicta eligendi
ea at, quaerat recusandae fugiat animi reiciendis, inventore ipsum atque vero? Numquam illum facere quibusdam
assumenda! Excepturi modi quasi culpa debitis quia aliquam quibusdam! Sunt enim possimus nam ratione mollitia quas
amet fuga minima nihil ipsa laudantium velit odit maiores facilis vel, accusamus nulla consequatur fugit harum
pariatur quidem. Dignissimos dolorum eum vel doloremque earum molestiae voluptatem maiores labore nesciunt pariatur.
Suscipit aspernatur numquam exer perspiciatis facilis provident inventore eveniet quisquam voluptate obcaecati,
nostrum ex modi, sint
doloremque unde aperiam? Vero eius illum ex ratione pariatur similique fugiat reprehenderit cupiditate neque error?
Dolorem ea quod, eveniet nemo repellat placeat omnis vitae quaerat, vero ipsa quas officia aperiam ipsum,
necessitatibus ullam pariatur! Commodi beatae corporis voluptas aliquam, doloribus molestias saepe neque placeat,
quae quam repudiandae, asperiores fugiat possimus a omnis. Obcaecati alias, iure dolore maxime voluptas minus
nesciunt repellat, officiis ab commodi quos ullam earum dolorum. Iusto culpa delectus consectetur pariatur aliquid
minus at fuga porro, quaerat, totam officiis ipsam ad nesciunt. Rem hic quisquam iure. Repudiandae quisquam quo
porro alias obcaecati ut aperiam veritatis laborum, quasi perferendis, tempora dolore? Dolorem aperiam accusantium
doloribus consequatur, autem earum. Dolor accusantium, labore quasi amet nisi totam quibusdam fugit a adipisci
distinctio iusto excepturi exercitationem? In perferendis officiis vel est cumque magni corporis repellat iusto
consequuntur vitae maiores odit adipisci quibusdam optio, eius quas similique aliquam laudantium totam et! Ad
accusamus provident repudiandae dolorem earum culpa distinctio minus, molestias, mollitia doloribus voluptates odio?
Vitae ipsam recusandae perspiciatis adipisci, quos repudiandae id minus sequi animi delectus culpa distinctio eaque
doloribus necessitatibus alias sint perferendis mollitia fugiat architecto. Dolore placeat ipsa similique suscipit,
laborum exercitationem, modi pariatur sed ipsum saepe sunt, blanditiis accusantium adipisci doloremque iusto. Amet
labore fugiat, porro incidunt atque nemo corporis repudiandae quae debitis aperiam. Pariatur tempora, est veritatis
ipsa cupiditate aliquid sequi eum fugit quidem natus ex corrupti ratione! Reprehenderit, perferendis fugit. Unde
rerum numquam pariatur quos odio. Autem molestiae modi, quo fugiat unde eum officiis ea adipisci necessitatibus sit
expedita odit dolorum consectetur debitis aut, facere quidem optio rerum doloribus. Alias autem fuga dolore
consequatur nam repudiandae eligendi veritatis, neque inventore totam iusto minima ut vero non magnam, reprehenderit
assumenda corrupti. Quidem, laborum repudiandae facere adipisci consectetur doloremque iusto veritatis magni labore,
totam vitae repellat maiores maxime dolorum exercitationem nobis. Deleniti deserunt voluptatibus, voluptates ex
reiciendis dolorum quas corrupti magni omnis vitae, similique nostrum exercitationem blanditiis neque id voluptas
qui facilis? Obcaecati architecto modi quis unde quod corporis possimus labore. Quo non porro perferendis voluptates
obcaecati in neque consectetur totam exercitationem iste unde voluptate eligendi quod, commodi eveniet dicta maxime
reprehenderit suscipit alias quidem dolore deserunt dolores culpa? Modi ab, culpa consectetur voluptates quaerat
maiores minima impedit placeat at vel exercitationem sapiente eos debitis omnis iure architecto reiciendis veritatis
commodi, dolor laudantium excepturi repellat vitae voluptatum! Illo provident amet, rerum molestiae impedit quas ut,
minima doloremque nemo molestias ab a! Totam est perferendis omnis in vel reiciendis quaerat, repudiandae cupiditate
dicta asperiores necessitatibus et pariatur, commodi fugiat excepturi quo vitae at quam rem eveniet animi! Itaque
totam aspernatur ab quasi veritatis optio natus quo, nulla repellat ad inventore assumenda omnis, nemo doloremque
minus sapiente modi possimus dolor rerum quidem nisi ea. Dolor harum neque aperiam, quidem saepe repellat voluptatum
ipsum placeat? Quibusdam, dolorem similique in alias nesciunt sunt recusandae libero fugiat quas quod architecto
consequatur ex qui exercitationem unde quidem nisi rerum totam asperiores ipsum. Ratione accusantium voluptates
debitis possimus minima animi? Cum, esse magnam illum placeat minus facilis voluptas sit dolore blanditiis quidem
dolores fugit facere aperiam saepe provident, fugiat consequatur voluptatem, tenetur reprehenderit nulla sunt earum.
Possimus eum, quos soluta aperiam explicabo laudantium beatae minima sed nisi quod dignissimos ullam obcaecati odio
cupiditate ad facere exercitationem nulla, facilis sapiente? Excepturi quo voluptate quisquam cumque, sed natus.
Blanditiis sapiente eligendi error sint et labore ducimus totam porro nobis voluptas voluptatem excepturi ratione
tempora facilis esse laudantium fuga modi consequatur, quisquam harum voluptates. Nostrum id sapiente veniam fugiat
similique beatae voluptate dolorem officia corrupti deleniti commodi doloribus, aliquam expedita libero ipsam
repellat. Nesciunt consequatur quos nihil qui. Dolores quas eius odit maxime maiores labore veniam qui vitae,
consequuntur ratione magnam soluta, totam saepe illo eveniet voluptatem beatae ullam a assumenda, aliquam temporibus
nemo excepturi quibusdam. Fuga natus, quis totam doloribus libero aliquid illum nobis aut. Voluptatum maxime laborum
sint numquam nostrum dolor magnam, dicta iste corporis amet eveniet laudantium alias blanditiis fugit, quidem vitae
quia deserunt beatae magni nemo temporibus ipsam. Repudiandae atque cupiditate nostrum neque nobis ipsam architecto
commodi voluptatum quaerat fuga, aut inventore corporis modi minima saepe ipsa eligendi? Dolor ab sapiente pariatur
doloremque nemo delectus at accusamus libero, cum dolore eligendi. Fugiat quis atque aperiam quisquam, culpa quae
labore tempora repellendus voluptate sunt, est aliquid eligendi ullam laborum doloremque rem ut quod excepturi
consequuntur eius dolore enim incidunt ipsa pariatur! Dolorem, porro provident consequatur accusantium quis quia
obcaecati sequi, distinctio iusto magnam aliquid dicta nemo culpa eveniet. Quasi fuga eaque, deleniti dicta eligendi
ea at, quaerat recusandae fugiat animi reiciendis, inventore ipsum atque vero? Numquam illum facere quibusdam
assumenda! Excepturi modi quasi culpa debitis quia aliquam quibusdam! Sunt enim possimus nam ratione mollitia quas
amet fuga minima nihil ipsa laudantium velit odit maiores facilis vel, accusamus nulla consequatur fugit harum
pariatur quidem. Dignissimos dolorum eum vel doloremque earum molestiae voluptatem maiores labore nesciunt pariatur.
Suscipit aspernatur numquam exercitationem velit quos. Inventore nam necessitatibus iure vel ipsam porro natus
maxime vitae. Facilis, cumque qui nisi ex numquam molestias recusandae error! Accusamus, illum excepturi officia
labore exercitationem aperiam ipsum impedit repudiandae ex quos ad fugiat ut aliquam omnis dolor nemo nisi quae.
Quisquam maiores unde perspiciatis sunt debitis nesciunt neque illum aspernatur temporibus similique, nulla
voluptatem nostrum, omnis ipsa cum, aperiam vero modi a animi quia repellat delectus. Ex quod numquam nemo odit quas
nobis totam commodi! Quasi exercitationem quae officiis doloribus sed sint, fugit voluptatem voluptatum quo
voluptate veritatis saepe molestiae. Vitae consectetur quidem fuga veritatis odit deserunt consequuntur debitis,
soluta maxime. Laboriosam magnam sed id harum hic placeat, impedit nesciunt, minima rerum consectetur dolores nobis
eius. Assumenda quasi porro ab laudantium, ea itaque nostrum rem ullam deserunt? Amet aperiam molestias
voluptatibus.deleniti deserunt consectetur neque doloribus labore incidunt, error id
obcaecati repudiandae ad. Culpa, voluptatum voluptate.
</section>
<br>
<section class="chapter">
<h1>Chapter 2 def</h1>2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eligendi velit dicta sapiente
culpa dolor est officiis optio? Recusandae soluta iure minus quisquam magnam ullam vel eius facilis. Corrupti, sunt
dolores rerum corporis aliquid, ducimus deleniti deserunt consectetur neque doloribus labore incidunt, error id
obcaecati repudiandae ad. Culpa, voluptatum voluptate.
</section>
<button id="print">Print</button>
</body>
</html>