I am using in my print.css the following instructions:

@media print {
...
	a, figure, object, img, svg, th, td {
		page-break-inside: avoid;
	}
...
}

However, if I have more than one image in a page, I get the second page truncated at the bottom of page overriding the page footer. You can see an example in the attached file. Any idea how to avoid that?

1. prince_image.jpg‎ 38.2 kB ‎
   Truncated image at bottom of page

Do you have any overflow properties or absolute positioning? The page-break-inside: avoid setting should not lead to overflow like this by itself.

Well, I have in the main css that is imported by print.css the following code;

@media (max-width: 767.98px) { 
	main {
		height: auto;
		overflow-y: auto;
	}
}

where main is the main section that contains most of body content. By the way I was wondering if I should change

@media (max-width: 767.98px) { 
...
}

and similar blocks to

@media only screen (max-width: 767.98px) { 
...
}

Hi dejudicibus,

I've got a fix currently being tested for a bug similar to what you report above, where the images are items in a flex column container. Is that the layout you're using? If you'd like to send some sample code I'll be happy to test the fix on that, too.

Mark

Well, I am using Bootstrap framework where flex is extensively used. For example:

<div class="row justify-content-center mt-3 mb-3">
	<div class="col-12 col-md-6">
		<h2 class="label print_h3 py-2">Mondo</h2>
		<figure class="map text-center framed">
			<img src="families/dejudicibus/sections/images/mondo_de_judicibus.jpg" class="figure-img img-fluid framed" alt="Stati vari" />
			<figcaption class="map-caption">Italia, Australia, Brasile, Francia, USA</figcaption>
		</figure>
	</div>
	<div class="col-12 col-md-6">
		<h2 class="label print_h3 py-2">Italia</h2>
		<figure class="map text-center framed">
			<img src="families/dejudicibus/sections/images/italia_de_judicibus.jpg" class="figure-img img-fluid framed" alt="Province varie" />
			<figcaption class="map-caption">Province di Lecce, Napoli, Avellino, Ravenna</figcaption>
		</figure>
	</div>
</div>

So, if FLEX is a problem, maybe you got the point.

Any news? Thank you.

We have uploaded a new latest build containing the aforementioned fix, but unfortunately it doesn't seem to fix your issue (tested with bootstrap v4.3.1). I will continue looking into it - thanks for letting us know about the problem!

UPDATE: the problem we have is with the "row" class, which is a multi-line flex container (i.e., it has flex-wrap: wrap). We aren't able to fragment these kind of flex containers with our current implementation, sorry.

Edited 16 Oct 2019 by markbrown

OK. I try to be constructive. Since I have a CSS for printing and one for the screen, I could override the row class in print.css but I would need your indication regarding how we could modify it to still get an acceptable layout and avoid the problem with the current implementation of Prince. Any suggestions? Selector row is defined as:

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

What can I change? Since for printing I do not need to be responsive, may I change display to table?

Edited 16 Oct 2019 by dejudicibus

Yes, setting display to table for this element seems an effective workaround in this instance.

OK, I solved the problem by overriding bootstrap.css as follows. I publish here the code just in case maybe useful for someone else but I DO NOT TAKE ANY RESPONSIBILITY for its usage.

/* FOR PRINCE */
.row {
	flex-wrap: unset !important;
	display: table !important;
	width: 100%;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
	display: table-cell !important;
	vertical-align: top;
	flex-basis: unset !important;
	flex-grow: unset !important;
}
.col-1 { width: 8.333333%;}		.col-2 { width: 16.666667%;}	.col-3 { width: 25%;}
.col-4 { width: 33.333333%;}	.col-5 { width: 41.666667%;}	.col-6 { width: 50%;}
.col-7 { width: 58.333333%;}	.col-8 { width: 66.666667%;}	.col-9 { width: 75%;}
.col-10 { width: 83.333333%;}	.col-11 { width: 91.666667%;}	.col-12 { width: 100%;}
@media (min-width: 576px) {
	.col-sm-1 { width: 8.333333%;}		.col-sm-2 { width: 16.666667%;}	.col-sm-3 { width: 25%;}
	.col-sm-4 { width: 33.333333%;}	.col-sm-5 { width: 41.666667%;}	.col-sm-6 { width: 50%;}
	.col-sm-7 { width: 58.333333%;}	.col-sm-8 { width: 66.666667%;}	.col-sm-9 { width: 75%;}
	.col-sm-10 { width: 83.333333%;}	.col-sm-11 { width: 91.666667%;}	.col-sm-12 { width: 100%;}
}
@media (min-width: 768px) {
	.col-md-1 { width: 8.333333%;}		.col-md-2 { width: 16.666667%;}	.col-md-3 { width: 25%;}
	.col-md-4 { width: 33.333333%;}	.col-md-5 { width: 41.666667%;}	.col-md-6 { width: 50%;}
	.col-md-7 { width: 58.333333%;}	.col-md-8 { width: 66.666667%;}	.col-md-9 { width: 75%;}
	.col-md-10 { width: 83.333333%;}	.col-md-11 { width: 91.666667%;}	.col-md-12 { width: 100%;}
}
@media (min-width: 992px) {
	.col-lg-1 { width: 8.333333%;}		.col-lg-2 { width: 16.666667%;}	.col-lg-3 { width: 25%;}
	.col-lg-4 { width: 33.333333%;}	.col-lg-5 { width: 41.666667%;}	.col-lg-6 { width: 50%;}
	.col-lg-7 { width: 58.333333%;}	.col-lg-8 { width: 66.666667%;}	.col-lg-9 { width: 75%;}
	.col-lg-10 { width: 83.333333%;}	.col-lg-11 { width: 91.666667%;}	.col-lg-12 { width: 100%;}
}
@media (min-width: 1200px) {
	.col-xl-1 { width: 8.333333%;}		.col-xl-2 { width: 16.666667%;}	.col-xl-3 { width: 25%;}
	.col-xl-4 { width: 33.333333%;}	.col-xl-5 { width: 41.666667%;}	.col-xl-6 { width: 50%;}
	.col-xl-7 { width: 58.333333%;}	.col-xl-8 { width: 66.666667%;}	.col-xl-9 { width: 75%;}
	.col-xl-10 { width: 83.333333%;}	.col-xl-11 { width: 91.666667%;}	.col-xl-12 { width: 100%;}
}

Edited 16 Oct 2019 by dejudicibus

I tested it in Prince and the image does not go below the bottom side, but it does go behind the right one. It looks like the 100% width is calculated wrong... Any idea? I attached also the same image as seen on screen. Please, note that the width of image is the same of text.

1. prince-4.jpg‎ 99.9 kB ‎
   In browser
2. prince-5.jpg‎ 34.7 kB ‎
   In Prince

Edited 16 Oct 2019 by dejudicibus

Do you want these to be laid out horizontally or vertically? Also, how big are the images in pixels?

It will probably make things easier if you add

@page {
    prince-shrink-to-fit: auto;
}

as bootstrap sets the body width to 992px, which may not fit on the paper size you are using.

Edited 17 Oct 2019 by markbrown

I tried but that instruction DOES NOT fix the problem. Just consider that I use

	body {
		width: 210mm !important;
		margin: 0mm !important;
		padding: 0mm !important;
		max-width: 210mm !important;
		...
	}
	header,
	footer,
	main{
		width: 190mm !important;
		margin: 0mm 6mm !important;
		padding: 10mm !important;
		max-width: 190mm !important;
		min-width: 190mm !important;
		...
	}
	.container,
	.row {
		max-width: 190mm !important;
	}

to override any width and max-width previous setting.

Fixed. Added media print to same block used by MD in Bootstrap. This is a change to previous published code.

@media (min-width: 768px), print {
	.col-md-1 { width: 8.333333%;}		.col-md-2 { width: 16.666667%;}	.col-md-3 { width: 25%;}
	.col-md-4 { width: 33.333333%;}	.col-md-5 { width: 41.666667%;}	.col-md-6 { width: 50%;}
	.col-md-7 { width: 58.333333%;}	.col-md-8 { width: 66.666667%;}	.col-md-9 { width: 75%;}
	.col-md-10 { width: 83.333333%;}	.col-md-11 { width: 91.666667%;}	.col-md-12 { width: 100%;}
}

I really appreciate your help, Mark. Thank you very much.

You're most welcome! Please let us know if you need any more help