How to mark page break occurrences in CSS print style

Question

I need to see where exactly browser puts page breaks in print preview, so I can modify that behaviour with CSS properties. In other words, I need to style page break itself (for testing purpose of course), so I could see where the page break will occur, so that I know which selectors to modify with page-break-after/inside/before properties.

To clarify this, I am NOT looking for Chrome Dev Tools print emulation. That tool unfortunately doesn't show what will page look like in print (anyone can compare it's results with results in Print preview window accessed by CTRL P in Chrome or any other browser). However, that tool may be useful when you need to find out whether some of your print CSS rules overrides certain screen media rule or not. But it doesn't help much in situations such as this, when you need to locate exact positions of browser-rendered page breaks in order to manually modify page break behaviour.

possible duplicate of [Faster way to develop and test print stylesheets (avoid print preview every time)?](http://stackoverflow.com/questions/9519556/faster-way-to-develop-and-test-print-stylesheets-avoid-print-preview-every-time) — void, Mar 13 '15 at 12:35
Obviously page breaks depend on the chosen page size/orientation, but for css rules such as `page-break-before: always` this could be shown in any dev version of a print preview or print css media rule in dev tools. — Dan Eastwell, Sep 11 '19 at 09:57
If your page breaks don't work get rid of any `display: flex`, especially on container divs that should break. Hope this helps a bit. I wish there was an easier way to see what's wrong with those page breaks as well, it's quite a pain to debug. — Geoffrey H, Aug 27 '20 at 17:46

score 1 · Answer 1 · answered Nov 10 '20 at 23:13

1

I'd recommend using page-break-after in your print media styles. Add it to the selector like you see below, and the page will break properly.

@media print {
  footer {
    page-break-after: always;
  }
}

answered Nov 10 '20 at 23:13

Millhorn

2,953
7
39
77

score 0 · Answer 2 · answered Feb 10 '21 at 09:54

Create a class which will contain your page break rule, and apply that class to all elements where you would like to add your page breaks. This is how I'd do it:

Set the page-break CSS property in a print media query.
Set the visual guide in a screen-only media query

Copy this code into a new HTML file to test it.

/*This media query will make sure the page break will be 
  added in print and is applied to print media only */
@media print {
  .page-break-after {
    page-break-after: always;
  }
}

/* This will show only on screen (always) */
@media screen {
  .page-break-after {
    display: block;
    border-bottom: 2px solid red;
    overflow: visible;
    position: relative;
  }
  .page-break-after:before {
    content: "Page Break";
    font-family: arial, helvetica, sans-serif;
    color: red;
    display: block;
    font-size: 8px;
    margin-top: -8px;
  }
}

<div class="container">
  <h1>Some title page 1</h1>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <div class="page-break-after"></div>
  <h1>Some subtitle page 2</h1>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <div class="page-break-after"></div>
  <h1>Some subtitle page 3</h1>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
  <p>Paragraph</p>
</div>

How to mark page break occurrences in CSS print style

2 Answers2