HTML header/footer print capabilities

13
votes

I'm trying hard to give full HTML header/footer printing capabilities to our Mediboard project.

Long term, I know that CSS3 Page Media module will fulfill my needs, but that's two or three years away at least.

So I tried to make it work with CSS2 capabilities, and it almost works as you can see on this printable document. Yet, I still have a limitation on the footer where the content prints under the footer (see pages 3-4 with Print Preview).

Though I'm pretty sure the padding-bottom of the div.body used to make it work in Firefox 2.

Anyway, does someone have a tricky clue to help me on that problem?

EDIT: To give more details, we currently have headers and footers by using elements positioned with position: fixed, with top:0 or bottom:0 depending if it is a header or a footer. This works well, and when printing, these elements are repeated on each page at the right position (see the "printable document" example). The only problem is when a page break occurs, the text is drawn behind these elements (see page 3/4)

EDIT2: Updated the document's URL

3
htmlcssprintingheaderfooter
Fabien, could you tell me which browsers you have this working in. I just checked on Google Chrome 8.0.552.237 and print preview is showing the footer at the bottom of only the last page. – DigiKev
Can you please describe your solution Fabien, it would be much appreciated! The link to the document is dead :/ – einarmagnus
I updated the URL. We didn't find a solution for this, we now use a PDF generator based on HTML to PDF conversion (actually dompdf or wkhtmltopdf, depending on the server configuration). – Fabien Ménager
I'm using it on Firefox, but on Chrome v24.0.1312 it only prints header and footer on the first page. – Erwin Julius

3 Answers

4
votes

It looks like CSS2 has a @page rule in which you can define your page size and a margin:

@page { size:8.5in 11in; margin: 6em 1em 2em }

-or-

@page { size:auto; margin: 6em 1em 2em }

Unfortunately I don't have time to test it, but I would love to know if it works. I could use that.

I like what you're planning with the header/footer. Good work :)

1
votes

From my experience, page-break doesn't work within an element. If an element such as [p][/p] spans two printed pages, the HTML code isn't aware where the break happens between the pages. This is because the user may sets their own printer margins be they 1 or 1.75 inches or some other value. Actual printer margins cannot be set via CSS. CSS can only set the margins and padding to the HTML page -- to the "printer's" defined margins. No information about printer settings, such as margins, is sent to browser. This explains why content is being underwritten under the header since the browser has no idea when the page feed happened. The easiest solution is just to have the header information on the first page but, that's not what you want. The brute force approach is to insert page breaks [br style="page-break-before: always;" /] within the paragraph at the appropriate place but, this isn't practical for a large number of documents. Also, subtle differences between printers including those from the same manufacturer differ subtlely - for exanmple, one print may print the content just fitting on one page, the next printer may have the last line on the next page even though both printers have the same margin settings. However, for tabular information ([table][/table]) assigning such CSS becomes easy to keep tables together. I'm speculating that one could count characters on a page and dynamically insert page breaks via javascript (easy, if you used JQuery) to approximate the brute force approach.

-3
votes

You will want to implement media types most likely. Please see http://www.w3.org/TR/CSS2/media.html for more information. You can have one CSS sheet that does not have a floating footer for printing, and the other for the screen.

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

That is an example.

You can also consider making the footer invisible on the printed page if you do not need it.