在HTML中创建分页符

Question

I am creating a resume using html and some elements have multiple lines. For example, an education can have the institute, the date attended, and the degree received on separate lines. However, the institute, the date, and the degree are all part of one record.

I am trying to create a page break when I print using html. I only want the page break to be inserted if the number of lines in the next element is greater than the number of lines remaining on the 8.5 x 11 page. Using the example earlier, I want all of the lines in the education record all on one page. The data is being passed in, so the page breaks can vary from resume to resume.

I have found code to create the page break: @media print {footer {page-break-after: always;}} .

I have also found code that can get the line height of a div:

var element = document.getElementById('content'); document.defaultView.getComputedStyle(element,null).getPropertyValue("lineHeight");

I need to count the number of lines remaining on the 8x11 page and compare that height to the height of the next element. Instead of using page breaks, another option would be to just add enough empty lines to move the element down enough for it to be all on one page, but I still need to be able to count the remaining lines. I would appreciate any suggestions. Thanks.

EDIT: Here is my code so far:

var totalHeight = 1056;
var divHeight = document.getElementById('element').offsetHeight;
totalHeight = totalHeight - divHeight;
if(totalHeight < 0)
{
    document.write("<style>");
    document.write("@media print {#element {page-break-after: always;}}");
    document.write("</style>");
}

However, when I print out the total height it only returns a number slightly over 200. Instead, the number should exceed 1056. Does the offsetHeight method only return the size of the text itself and not the spacing around it or is there another problem that could be causing the drastic difference? Thanks.

Answer 1

I think the trickiest part here is dealing with whatever margin the browser will put on the page when it goes to print. Not sure if you can control that. But if you can, try using in as your sizing unit instead of something like px or em . Then, if you calculate that you're going to go over 11in with what you've got, add your page break.

Here's a pseudo-code algorithm:

var totalHeight = page margin

foreach div:
    totalHeight += calculated height in inches

    if totalHeight > 11in:
        insert page break

rinse and repeat for further pages