Monday, 3 October 2011

HTML & CSS: header and footer elements for printing

   


In July this year, I've posted an article about collecting data from an xml file in order to display it and eventually print it [JavaScript: get data from an xml file (like a Blogger backup file) and display it (or print it)]. The main reason why I wrote that post is because I wanted to create a unique way of printing The Web Thought. I managed to collect the data (articles body, datestamps, titles and so on) from the xml file generated by Blogger as blog backup, so I now have a good page ready for printing.

Since then, I've worked again on the file and I've changed it a bit, just to include some specific features I needed. Basically I've changed the css style and the JavaScript code. I don't think you might be interested in that part (if you are please let me know so that I can share it), however there's a bit of code I would like to show you. Basically we want to create footers and headers for every printed page.


What was the problem?
The problem that I kept thinking about, was that I needed to create an header and a footer for all the pages. That is not a real problem if you need to do it for a web page (I explained the way to do it in another post), but we are talking about creating headers and footers for printing.

If we create for example a footer using a CSS style that gives it a fixed position, we can see our footer staying at the bottom of our page, as we wanted. However if our content (for example the text of our article) flows over a new page, the text will overlap the footer. That is a problem... well actually two problems.

Two problems actually
First of all, the content of the footer will be unreadable, as well as the overflowing text. Secondly, there will be no margin at the bottom of the page.

While the normal flow of elements, in a web page, is easily controllable, when we insert forced page breaks, or we leave the browser to do the dirt job of creating page breaks, we really need to take control of top and bottom margins, and headers and footers repeated on every page.

The solution
The solution is quite simple, and it involves the use of tables. We basically need to create 3 tables as follows.
First we create a table head, so that it will be repeated on every page
<table border="0" width="100%">
   <thead>
    <tr>
     <th style="width:100%">page header</th>
   </tr>
   <tr>
    <th><hr style="color:#000080"/></th>
   </tr>
  </thead> 
Then we create the table foot. This will be blank (we add a &nbsp;) so that the main content will not appear on it.
  <tfoot>
   <tr>
    <td width="100%">
     <table width="100%" border="0">
       <tr>
         <td colspan="4"><br>&nbsp;</td>
      </tr>
    </table>
  </tfoot>
Then we insert the main part:
  <tbody>
    <tr>
      <td width="100%">
         put your text (for example article main body, title etc...)
      </td>
   </tr>
 </tbody>
</table>
Now add the footer. This is what will appear on every page. This footer will appear only on printed media (see the CSS style):
<table id="footer" width="100%">
  <tr>
    <td width="100%">
      footer text
    </td>
  </tr>
</table>
And that's it. Now we need the styles.

The CSS
I include here only the CSS style needed for the footer (which has an id set to "footer").
@media print
{
    #footer {
         display: block;
         position: fixed;
         bottom: 0;
    }
}
Now, we can decide the style for all the other elements (and I leave that to your fantasy!).

Conclusion
The above solution works very well, and creates headers and footers on every printed page. That is very useful when we want to show printable content with a decent content flow.

Let me know if you need more help and if you've found the solution helpful.

20 comments:

  1. Good wit. Thank you very much. Totally useful.

    ReplyDelete
  2. Doesn't seem to work on Chrome. Have you tried it on Chrome/Safari?

    ReplyDelete
    Replies
    1. Yes, it does work on my version of Chrome. I suggest in any case to use Firefox.

      Delete
  3. Do you have a demo?

    ReplyDelete
  4. Thankyou very much. Its working for me :)
    Madhavi

    ReplyDelete
  5. This way we can create footer and header without any doubt.
    But how to avoid the footer and header hiding the content of the HTML page while printing

    ReplyDelete
  6. Dont work... only print one header (on the first page) and only one footer (on the last page).
    I need that the header and the footer prints in all pages...
    Which is my problem?? Can you help me??



    ReplyDelete
    Replies
    1. Please read the article. I assure you it's working and because it worked for me it's only a matter of using your brain to find the solution to your individual issue.

      Delete
  7. In the «tfoot» section of your code you don't close the «tr» and «td» tags... Is there any reason for this or these are just typos?

    ReplyDelete
  8. Hi It does not work in Chrome.any suggestion

    ReplyDelete
  9. doesn't work for a multi-page html document

    ReplyDelete
    Replies
    1. Sorry but it does work for multiple-page documents. I've used it specifically for those situations.

      Delete
  10. if the header content exceeds certain height it does not repeat on every printed page ..... Can you help me out on this

    ReplyDelete
  11. Doesn't work on Chrome

    ReplyDelete
  12. Chrome (as all other webkit browsers) won't repeat fixed elements. Thus, the footwer will not be printed on every page.
    This is a known bug in webkit:
    http://code.google.com/p/chromium/issues/detail?id=24826

    ReplyDelete
  13. Can any one provide the solution for this to work on chrome.

    ReplyDelete
  14. Chrome has fixed the header issue in next release. If you want to test, download "chrome canary" version and test. Crome has not fixed the footer issue in canary release yet.


    Jayesh

    ReplyDelete

Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.