Here is the link to a single HTML file (including style and scripts): FQ.html
The problem I'm facing can be seen in this image: https://i.sstatic.net/Nr4BZ.png
I've tried several solutions, the latest of which involves the following CSS...
@media print{
@page {
size:1080px 1080px;
margin: 0px;
}
.page-break-before { page-break-before: always; display:block; width:200%;}
.page-break { display:block; page-break-after: always; width:200%; }
}
...and some Javascript.
//set viewport height in print mode.
var height = 780;
//pick up the total table.
var table = $('#identification_section > table')[0];
//initialize the sum variable with height of title (h2 tag)
var sum = 24;
//loop all table rows including child tables
for (var i = 0, row; row = table.rows[i]; i++) {
//tr is the parent table row which may contain child table.
var tr = row;
if (tr.offsetHeight > height) {
var child_table = tr.cells[0].children[0];
if (child_table.className=="group-table") {
var child_sum = 0;
for (var j=0, subrow; subrow = child_table.rows[j]; j++) {
var subtr = subrow;
child_sum += subtr.offsetHeight;
if (child_table.rows[j+1]!=null)
if (child_sum + child_table.rows[j+1].offsetHeight > height) {
child_table.rows[j+1].classList.add('page-break-before');
subtr.classList.add('page-break');
child_sum = 0;
}
}
}
}
sum += tr.offsetHeight;
if (table.rows[i+1]!=null)
if (sum + table.rows[i+1].offsetHeight>height) {
table.rows[i+1].classList.add('page-break-before');
tr.classList.add('page-break');
sum = 0;
}
}
Despite my efforts, I am still struggling with the issue. Instead of avoiding breaks on text, I thought it might be easier to avoid breaking on a div element. However, there are still 2 main issues with my attempted solution - excessive breaks and the width setting not working properly.
I would appreciate any advice on how to prevent breaks on text or divs, preferably text.