Print Styles: How to Ensure Image Doesn't Span a Page Break

Print styles: How to ensure image doesn't span a page break

The only means I can think of is to use one (or potentially more) of the following css rules:

img {
    page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-inside: avoid; /* or 'auto' */
}

I half-recall that these declarations only apply to block-level elements (so you'd also have to define display: block; on your image, or use some kind of wrapping container and apply the rules to that (whether it's in a paragraph, div, span, list, etc...).

Some useful discussion here: "What are most usefule media="print" specific, cross-browser compatible CSS properties?"

References:

• page-break-after.
• page-break-before.
• page-break-inside.

html-pdf: How to ensure image doesn't span a page break

Add into your css an @print section for your div:

@media print {
     div#canvasWrap { width: 2.4cm; }
  }

And add a wrapping div around your canvas:

<div id="canvasWrap">
    <canvas id="bar-chart" class="canvas-styles"></canvas>
</div>

Add any styles you need to the wrapper ...

Forcing a page break only when necessary during print

Terns out that embedding divs are not supported for page-break-inside:avoid. In order to accomplish what I was trying to do, I needed to convert my html to a table and surround it with a single div. This also works on FF(38.0.5), IE(11), and Chrome(43.0.2357.130 m)

<div style="page-break-inside: avoid;">
   <table style="width:100%;">
       <tbody>
       <tr>
            <td style="width:400px;">
                 <h2>**Delinquency Notice** as of 12/31/13</h2>
            </td>
            <td style="width:400px;">
                 <h2>Recent Account History</h2>
            </td>
        </tr>
        <tr>
            <td class="padding"><b>You are late on your mortgage payments.</b> 
                    As of 4/17/2015, you are 106 days late on your mortgage payments. 
                    Failure to bring your loan current may result in fees and 
                    foreclosure -- the loss of your home.<br/><br/>If you are experiencing financial difficulty, HUD
                    (U.S. Dept 
                    of Housing and Urban Development) approved counseling agents 
                    are available to provide mortgage and foreclosure counseling 
                    assistance. Refer to the HUD disclosure section on the 
                    statement front for contact information.
            </td>
            <td class="padding">
                <ul style="list-style-type: disc;">
                    <li>Payment due 12/01/2014: Fully paid on 11/30/2014</li>
                    <li>Payment due 1/01/2015: Unpaid balance of $1,290.02</li>
                    <li>Payment due 2/01/2015: Fully paid on 1/31/2015</li>
                    <li>Payment due 3/01/2015: Fully paid on 2/28/2015</li>
                    <li>Payment due 4/01/2015: Fully paid on 3/17/2015</li>
                    <li>Current payment due 5/01/2015: $1,290.02</li>
                </ul>
                <br/><b>Total: $6,495.86 due. You must pay this amount to bring your loan current</b></td>
        </tr>
        </tbody>
    </table>
</div>

CSS Printing: Avoiding cut-in-half DIVs between pages?

Using break-inside should work:

@media print {
  div {
    break-inside: avoid;
  }
}

It works on all major browsers:

• Chrome 50+
• Edge 12+
• Firefox 65+
• Opera 37+
• Safari 10+

Using page-break-inside: avoid; instead should work too, but has been exactly deprecated by break-inside: avoid.

Can I force a page break in HTML printing?

Add a CSS class called "pagebreak" (or "pb"), like so:

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}

Then add an empty DIV tag (or any block element that generates a box) where you want the page break.

<div class="pagebreak"> </div>

It won't show up on the page, but will break up the page when printing.

P.S. Perhaps this only applies when using -after (and also what else you might be doing with other <div>s on the page), but I found that I had to augment the CSS class as follows:

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

page break not working on image tag

This property applies to block elements that generate a box. It won't apply on an empty <div> that won't generate a box.

— From MDN about page-break

You need make your image a block-level element, e.g. with display: block;.

See page-break-before, page-break-after or page-break-inside

Change document flow on page break to fill space

This is a total stab in the dark, but it may at least set you in the right direction...

Combining the page(n) pseudo-element selector, the float / float-modifier properties, and possibly CSS4 parent selectors may provide some sort of solution.

Here are few behaviors an example:

/* CSS3 GCPM */
#image-a::page(2) {
  page-break-before: auto;
  float: top next-page;
  margin-bottom: -320px; /* Assuming the image height is 320px */
}

/* CSS4 Parent Selector */
$#image-a ::page(2) {
  page-break-before: auto;
  float: top next-page;
  margin-bottom: -320px; /* Assuming the image height is 320px */
}

This basically states that if image-a actually wraps onto a second page, that a float should be applied to it, sending it to the top of the next page. Depending on how browsers choose to render this, you may get the result you are looking for (Hopefully):

1. Wrapping into the second page is detected
2. The page-break-before property forces the float property to apply to entire elements (or the parent selector does it's job)
3. The float and margin properties takes the element out of document flow and allow other content to take it's space

I know this is a real stretch and will not work, but perhaps it will trigger a line of thought allowing you come up with a more solid solution :)

---

Related Topics