i have a simple css:

.pagebreak::before {
    content: ' ';
    display: block;
    page-break-after: always;
  }

i insert `pagebreak` class in html where the previous page i want to be blank.

my simple html looks like:

<div class="container">
      <div class="frontcover"></div>
      <nav id="toc" role="doc-toc" class="pagebreak">
        <h1>table of contents</h1>
        <ol>
          <li class="chapter"><a href="#chapter-1">chapter 1</a></li>
          <li class="ml-3">
            <a href="#writing-a-table-of-contents"
              >writing a table of contents</a
            >
          </li>
          <li class="chapter"><a href="#chapter-2">chapter 2</a></li>
        </ol>
      </nav>
      <h1 class="chapter" id="#chapter-1">chapter 1</h1>
      <h2 class="subtitle" id="#writing-a-table-of-contents">
        writing a table of contents
      </h2>
      <h1 class="chapter" id="#chapter-2">chapter 2</h1>
    </div>

it works fine when i put it above `h1#chapter-1` but when i put the class `pagebreak` on `h2#writing-a-table-of-contents` or `h1#chapter-2` then it still works as if it's put on `h1#chapter-1` ,i.e, i get an empty page between`h1#chapter-1` & `#toc`

is there a way to write a generic `.pagebreak` class that works always.

i've also tried changing the `.pagebreak::before` to `.pagebreak::after` & it doesn't work for some reason. checked out other forums messages on the same topic but too confusing to understand.

1. index.css‎ 13.2 kB
2. index.html‎ 1.1 kB
3. index.pdf‎ 621.4 kB

is there a way to have blank pages after `.frontcover` (just before `nav#toc`) & before each `h1.chapter` that works reliably?

every time it generates different output pdfs. very unreliable.

Does it work if you remove the hash marks from the IDs?

@csant i've already removed hash mark from the ids as suggested on https://www.princexml.com/forum/topic/4781/table-of-contents-doesnt-have-numbers-isnt-clickable-in-the

the solution i've found for now that is working as intended is changing my html slightly:

<div class="page-break-before-toc"></div>
<nav id="toc" role="doc-toc">
</nav>
<div class="page-break-before-chapter"></div>
<h1 id="chapter-1" class="chapter">chapter 1</h1>

and css as well:

.page-break-before-toc {
    page: nofooter;
    page-break-after: always;
  }

  .page-break-before-chapter {
    page: nofooter;
    page-break-before: always;
  }

i do wish there was a reliable way to do page-breaks with 1 class.

just in case i need to update the book i might have to do this stuff again if it interfers somehow.

Rather than inserting an element, have you tried just targeting the title you'd love to start on a new page?

h1#chapter-1, h2#writing-a-table-of-contents {
break-before: page;
}

i tried targetting it with a global class `.chapter` but it didn't work. the 2nd chapter didn't have a blank page before it. i can't go on writing each selector in css since there are lots of chapters.

the solution i have works for now so i'll keep it.

I can't replicate the irregularities reported above. To have a blank page, I would add a page break both before and after the generated content:

.pagebreak::before {
    content: 'Intentionally left blank';
    display: block;
    page-break-before: always;
    page-break-after: always;
  }

1. foo.html‎ 0.9 kB

i just tried that. it works nicely & is a lot cleaner too.