Detect Element In Bottom Of Print Page - html

Question

I want to implement pretty print using jquery and html.
if any div with .section class is in bottom of A4 page (my A4 body width is 595px and each page height is 842px) i add margin for push this section in next page.
here is my code:
$(".section").each(function () {
//add element offset top to detect element page number
//for example if element top is 1400 then it is in page 2 (842*2 > 1400)
$(this).attr('data-top', $(this).offset().top);
});
$(".section").each(function () {
$elementTop = $(this).data('top');
if (parseInt($elementTop) > ($currentPage * $A4PageHeight)) {
if (!$(this).hasClass('rendered')) {
$(this).css('margin-top', ($elementTop - ($currentPage * $A4PageHeight)) + 'px');
$(this).addClass('rendered');
$(this).addClass('page-'+$currentPage);
}
$currentPage += 1;
}
});
please help me to do this.

Answer 1

You may wish to set page break CSS attributes to tell the browser where it should avoid breaking. You could add page-break-inside: avoid to a div that you want the browser to try not break
You can also set the number of lines of paragraph text that should be visible before a break with an orphans definition.
More details:
https://www.w3.org/TR/WD-css2-971104/page.html