Using styles to dynamically create headers, footers, and page breaks
While perusing a discussion board, I read a question from a concerned developer who was trying to programmatically create headers and footers and insert page breaks on an HTML page. This is next to impossible considering what your output is, since there's no easy way to figure out the browser's current settings for margins, page sizes, etc. However, if you want to force widths and page breaks, you can do it.
One way to accomplish this is to use TABLEs. In this article, I'll show you how to create the headers and footers necessary to dynamically insert these items to create a formatted hardcopy. (Note: I used IE 6.0 to test the code in this tip. It also works on 5.0 and above, because I use the @media pseudo-class available for the STYLE element in IE since 5.0.)
The easiest way to create this functionality is to use TABLEs. However, your formatted output must contain individual rows that don't exceed the printed page's height. Also, your TABLE must not exceed the width of the printed page. Since you don't have any control over landscape or portrait, you must make some assumptions. You'll assume that the orientation of the document is portrait with 1" margins left and right, 0.25" margins top and bottom, and the paper size is 8.5" X 11". This means that you have 6.5" total width for output, so your TABLE width will be set to 6.5in, no border. At the top of the table, you're going to create two hidden DIVs that will serve as the header and footer. The DIVs have set widths and heights, and the overflow style attribute is set to hidden. This sets the foundation for your output. In order to create the page breaks, headers, and footers, you'll have to incorporate some JavaScript after the page loads.
The idea for creating the formatted output is to copy the header and footer DIVS into hidden rows. However, you'll set the display style attribute to inline for @media print. Also, you'll set the page-break-after style attribute to always for the TR just before the footer.
During the BODY onload event, iterate through all the rows to determine whether the row offsetTop plus the offsetHeight exceeds the available length of the page. The available length is the length of the page minus the sum of the heights of the header, footer, and top and bottom margins. So, if the header height and footer heights are each 1", the top and bottom margins are 0.25", and the page length is 11", then the available width is 8.5": 11 - (1 x 2) - (0.25 x 2) = 8.5.
Here's the HTML that accomplishes this task:
When you examine the sample code, you'll notice that the header and footer are two hidden DIVs that appear right before the TABLE element. The TABLE tbl1 contains multiple TRs. Each of the rows is identified as t1 to help iterate through them using the all collection. This example will only work with two or more rows. I create the style class hdrftr to identify when those items should be displayed. The JavaScript details how the functionality is created.
First, a header row is added to the top of the table. Next, each row is examined to determine if the top coordinate plus the row height plus the footer height--1in * screen.deviceYDPI or just screen.deviceYDPI--meets or exceeds the total available height. If this value matches the available height, the current row is set to have a page break after it. If this value exceeds the available height, the previous row is set. The row of interest is then used to append a footer row after it and a header row is added after the footer row. This process continues until all rows are examined. Finally, a footer row is appended to the end of the table. The footer row contains absolute positioning to avoid inadvertent page-breaks from the browser, thus giving us a little margin of error. Also, each subsequent page must make a provision for the additional header rows that we add: (page - 1) * 1, where (page - 1) is the subsequent page number and 1 is the height of the header.