如何强制章节从 ODD 页面（html 和 epub）开始
Posted
技术标签:
【中文标题】如何强制章节从 ODD 页面（html 和 epub）开始【英文标题】：How to force chapters to start on ODD pages (html and epub) 【发布时间】：2021-12-31 07:09:05 【问题描述】：.Chapter
padding-bottom: 30vh;
break-before: right !important;
好消息：章节从自己的页面开始
坏消息：预期的行为
"在主框之前强制一到两个分页符， 哪个会使下一页变成正确的页面”
被浏览器和任何 epub 阅读器公然忽略。有任何解决这个问题的方法吗？哦，break-before: recto 也不起作用。
【问题讨论】：
我认为recto 和verso 还没有被任何浏览器实现。它们就在规格中。 developer.mozilla.org/en-US/docs/Web/CSS/…
【参考方案1】：
要实现你想要的，你需要使用一个 pollyfill，比如paged.js。
我使用 pollyfill 创建了一个最小的示例，它可以实现您想要的。将以下代码放在单独的 html 文件中，然后在 Chrome 中打开并点击 print 按钮。
<!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>
【讨论】：
我在我的项目中使用 React，所以我最终使用pagedjs-cli 编译为 PDF，但现在进展顺利。您的答案比预期的要好得多，特别是因为只有 W3C 和您知道的 string-set 功能（甚至 sass 编译器都不知道）。你摇滚。以上是关于如何强制章节从 ODD 页面（html 和 epub）开始的主要内容，如果未能解决你的问题，请参考以下文章