How do I create HTML prints with headers and footers?

October 1, 2005 10:25 PM

How do I create HTML that emulates a word processor's "headers and footers" feature? I need to create some HTML (probably via a XSL transform) that has header and footer blocks that contain certain pieces of repeated dynamic information including total number of pages, current page, etc.

My wife is a elementary school teacher and has conned me into writing a good lesson plan editor for Mac OS X. The output of the editor should be a table that spans two or three pages. Each page should have a header with the date and title and a footer with the current page number and total number pages.

I think outputting HTML would be relatively easy - my program can output an intermediate XML file which I will then use XSL to transform into pretty HTML. The question is how do I format this HTML so that it mimics her current lesson plans (created by hand in MS Word) and has nicely formatted headers and footers?

The lesson plans only need to render inside Safari - so I do not care at all about compatibility with other browsers. I know I can use thead/tbody and CSS overflow to get a table to scroll but keep its header in place. But I cannot get it to print correctly, the elements inside thead only end up being printed on the first page. Also a thead element can only contain other table elements and not any piece of HTML - so I would have to do some horrible table layouts.

posted by schwa to Computers & Internet (9 answers total)

Most browsers do that for you already when you print from them. You can even customize what shows up in those headers/footers. From your browser select File and then Page Setup (it's the same in IE and Mozilla).
posted by furtive at 11:01 PM on October 1, 2005

Response by poster: I need to customize the header and footer from within the HTML itself. Safari only gives me the option to toggle on and off "Print webpage information in headers and footers", which does contain some of what I need to print but cannot be styled correctly.

Also I need to print the table header at the top of each page too.

I am actually coding this myself using Cocoa and CoreData for the UI. I'll be rendering the HTML myself in a WebKit view. I can cheat and render the header and footer from Cocoa - but I would love to do this all in pure HTML.
posted by schwa at 11:11 PM on October 1, 2005

Best answer: Create normal HTML elements containing the information you want and position their surrounding block to be fixed to the viewport, ala:

#header { position: fixed;top: 0;left: 0; }
#footer { position: fixed;bottom: 0;left: 0; }

Add further style to taste, specify height and use margins to move the content block out from under them; printing should place them at either end of each printed page and attach them to the viewport in the browser.

Caveats: Needs some JS trickery to work with IE6, iirc. Ask if you need a more detailed example :)
posted by Freaky at 11:48 PM on October 1, 2005

Response by poster: Aha. So simple.

I wont need JS trickery because I just need to support WebKit and Safari.

I can use the thead/tbody overflow trick to get my table header to be printed on every page.

Thanks! This should work.
posted by schwa at 11:51 PM on October 1, 2005

Response by poster: For extra points is there a way to keep a row of a table together so that it is unlikely to be have a page break right in the middle?
posted by schwa at 12:00 AM on October 2, 2005

Best answer: I don't think Freaky's solution will work -- AFAIK, it will place the header on the top of the first page and the footer on the bottom of the last (but don't let that stop you from trying it out, I may be wrong).

As to your bonus question, try adding the following to your stylesheet:

tr { page-break-inside: avoid }
posted by nmiell at 12:18 AM on October 2, 2005

Best answer: You might want to read up on CSS for paged media. There are some different rules that come into play there.
posted by adamrice at 6:45 AM on October 2, 2005

Response by poster: Well thanks for everyone's help. The "CSS for paged media" link was very interesting.

Unfortunately I haven't found a reasonably solution that works with Safari. It looks like Safari doesn't work with the paged media model properly.

I think I need to find an alternate solution.
posted by schwa at 9:42 AM on October 2, 2005

did you try
@page :before {} and
@page :after {}
?
this would require embedding some of your content into the stylesheet, which is usually bad, but if you can generate the css programatically it wouldn't be a big deal in terms of maintenance.
posted by misterbrandt at 11:10 AM on October 2, 2005