Website: Make printable version with footnotes?

Question

I have a website that uses editable divs so that a user can modify or make notes to a text. Is there a way I can have the website generate a pdf or some printable document with footnotes, such that if a user has this:

<div class="text" id="text_1">
    <div class="bodyTest">This is the body text</div>
    <div class="notes">These are the notes</div>
</div>
<div class="text" id="text_2">
    <div class="bodyTest">This is the body text</div>
    <div class="notes">These are the notes</div>
</div>

the website will generate a printable version (or document) in such a way thatdiv.notes will appear as a footnote on the same page on which div#text_1 appears? I don't need a full answer, just a shove in the general direction will be amazing. Thanks.

Answer 1

The first thing I'd do is create a print style sheet, and use the following to link it.

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

That style sheet should be print-friendly - E.g. black & white, minimal content. Then when the user is on the page and they use their browser's print function, it will use that style sheet.

Now if you're going to extent the website so that it can generate a PDF/other doc type on the fly, which I'm not entirely convinced it's worth the effort, you can search for instructions regarding your chosen technology. I know a free method is to use OpenOffice.org by installing that on the server and connecting to it.