How to force chapters to start on ODD pages (html and epub)
Asked Answered
C

1

2
.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.

Caressive answered 21/11, 2021 at 8:31 Comment(1)
I think recto and verso have not been implemented by any browsers yet. They are just there in the specs. developer.mozilla.org/en-US/docs/Web/CSS/…Parenteau
P
1

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>
Parenteau answered 21/11, 2021 at 12:32 Comment(1)
I use React in my project so I'm finally using pagedjs-cli to compile to PDF, but it's going well now. Your answer was much better than expected, specially because of that string-set feature which is only known by the W3C and you (not even the sass compiler knows about it). You rock.Caressive

© 2022 - 2024 — McMap. All rights reserved.