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

Question

When writing a print stylesheet, is there a way to ensure that an image is always only on a single page, instead of spanning multiple pages. The images much smaller than the page, but based on the document flow, they end up at the bottom of the page and get split. An example of the behavior I'm seeing is below:

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |  ________________  |
       | | Top of image   | |
       |____________________|
       ------page break------
        ____________________
Page 2 | | Rest of image  | |
       | |________________| |
       |         …          |

What I'd like

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |                    |
       |                    |
       |____________________|
       ------page break------
        ____________________
Page 2 |  ________________  |
       | | Full image     | |
       | |                | |
       | |________________| |
       |         …          |

All those times I complained about floats in LaTeX, and here I am asking for the same functionality... Can this be done? I'm not necessarily concerned about it working in all browsers, since this is often just a one-off document I'm writing to be turned into a PDF.

Upvote for great use of ASCII art diagrams :) – NickG Oct 21 '14 at 13:55 — NickG, Oct 21 '14 at 13:55
@NickG Much agreed, really awesome ASCII diagram! – May 08 '15 at 07:25 — , May 08 '15 at 07:25

score 75 · Accepted Answer · edited May 23 '17 at 12:02

75

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:

edited May 23 '17 at 12:02

Community

1
1

answered Apr 15 '10 at 22:56

David Thomas

240,457
50
366
401

3

Yup, this works. (`page-break-inside:avoid`). Now I'm reminded of why LaTeX floats are a pain. – davidtbernal Apr 19 '10 at 17:33
2

@notJim only the floats? – Mindwin Feb 10 '16 at 14:40
1

The explanation is very logical, but for some reason it doesn't work for my HTML5 file with Firefox 54. Maybe just a bug, since it works with Internet Explorer 11... – Wolf Jun 26 '17 at 08:20
[page-break-inside - CSS | MDN](https://developer.mozilla.org/de/docs/Web/CSS/page-break-inside) is a page dedicated to this flaw ;) – Wolf Jun 26 '17 at 09:58
@Wolf Did that page change? Or am I missing something? Why doesn't this work in HTML5 with FF54? – The Oddler Jul 29 '17 at 07:34
1

@TheOddler *`Why doesn't this work in HTML5 with FF54`* -- I couldn't believe this either – Wolf Jul 29 '17 at 08:06
1

@Wolf Very weird yea. I have since tried it on Safara and there it works fine. So I guess I'll have to whip out my mac to print pages :P – The Oddler Jul 29 '17 at 18:38

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

1 Answers1

Linked