add header when page breaks when using page-break-inside: avoid wth css or javascript or from browser?

Question

i have a page that has sections as divs with inner divs and content. The numberof divs varies alot from less than a page to many pages when printing.

I am using page-break-inside: avoid on every section div so that all sections are never printed / split accross 2 pages. (This i only get to work in firefox but that whole other story....!).

Problem is i want to add a header image to the top of each page when printed but using the page-break-inside: avoid css property i dont know where to add the headersasthis is worked ou when printing.

Any one know ow i can acheive this ? can i somehow find out where the page breaks are going to be and add header there ? or is there a way of setting header image in the brower like you can to word documents etc ?

please help thanks alot rick

Answer 1

It's impossible to control the printed page from JS/HTML/CSS because you don't have any access to the print driver so you can not know what paper size or margins the user has set.

To get around this you could use a component to create a PDF from your HTML so you will have more control of the layout. That would have to be done server-side.

Answer 2

I don't see any way of add header information using CSS2 ( spec ). There is a way to add TEXT to a "page header" using CSS3 ( link , spec ). I'm not sure if this will also cover images, but it's a start. You will need to consider CSS3 adoption and if it suits your business needs (from wikipedia link it looks like only Opera supports the @page option, but that info could be stale).

I don't think you could use javascript to inject headers onto each page when it's being formatted for print. I don't see how that could be done (but I could be wrong on this one).

What you could do, is define a div that is invisible on a browser page, but shows up on a printed page. Something like this should do it:

<STYLE type="text/css">
@media print {
div.header {display:block;}
}
@media screen {
div.header {display:none;}
}
</STYLE>

You could then place a div containing your header after a forced page break. This should work for you, further CSS could probably be used to force this div to align with the top of the page etc. Of course, this then also requires you to use forced page breaks, which means you need to know in advance how much data you can fit to a page, not ideal.

Hope this helps.