footer or header on every printed page

[rhackenb]

I need to be able to create a web page that will have either a footer or header on every printed page if the user decides to print to hard copy. (assume that it will something like a copyright notice). The actual web page will be of variable length depending on the data and graphs that are generated. Actually, the message that appears on every page could even be a side banner or a watermark

I've research watermarks, floting images, and some css trick but can't find anything that works. Background images would be a good idea but backgrounds don't print.

I think the solution lies in css style sheets but haven't found it. Can anyone help?

Thanks,

bob

 

[palbano]

A developer in my shop has been working on that for several days now and so far it does not appear to be supported.

The closest thing to it that has been found is the <THEADER> and <TFOOT> elements of <TABLE>. There are limitations to what can be done using them. Perhaps they will work for you.

For reporting purposes you might be better off working with XML and XML-FO. That way you can use things like PDF etc.

If you do solve this please post the solution to this group and make it a FAQ.

Good luck
-pete

 

[rhackenb]

I think it is a hard nut to crack. In the past we had been generating PDF files but we're talking about hundreds of reports per day and that takes away from the spontaneity of html. We ususally batched a day's report into one huge PDF. We were able to put footers on each page that way.

I will look into <tfoot> but that sounds like a footer to a table. The trouble is that our tables can bleed over several pages in print form.

I see two viable choices for now. Create a running table for the whole document and put a banner down the left column. The other one, the one I will probaby opt for is to generate a PDF for each report and have the user only see the link to the PDF and not the html itself.

I thought I had a solution with CSS using @page but I think there is a disclaimer it doesn't handle things like page footers yet. Someone please prove me wrong.

Thanks for your response.

-- bob

 

[Wullie]

Hi mate,

Why not offer users a printer friendly version?

If you wanted to do this, then you can set the page up with SSI or similar to dynamically include the header and footer based on the query string request to the page.

Hope this helps Wullie

sales@freshlookdesign.co.uk

http://www.freshlookdesign.com

http://www.thomsonassociates.co.uk

The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell

 

[rhackenb]

The idea of a printer friendly version is good but the requirement that I have is that the user can't be given the option of how to print it. Just using the normal print command from the browser must render the notation on every page. Think of the web page being marked 'Company Proprietary' for an interna web page.

talbalno actually had the key to this with the use of <thead> and <tfoot>. The pages that I am generating are already fairly complex in terms of tables and graphs. All I had to do was wrap the entire page in yet another table without borders and use the additional markup to make it work. I am preparing a FAQ describing what you have to do.

I should point out that Netscape 6, Mozilla, and Internet Explorer respect the new markup but Netscape 4.7 does not. I plan on blocking access to Netscape 4.X browswers via a CGI script.

The FAQ will be listed in a follow-up posting.

-- bob

 

[palbano]

Bob Beware,

The one criteria that we have that stops us from using <THEAD><TFOOT> for our solution is that we have several places we want to force page breaks. This is not supported within tables!

-pete

 

[rhackenb]

The problem with all of this, including the problem I have, is that people are trying to make the web act like Word or something designed for the print medium. wullie suggested putting a printer friendly button, an option that I can't have.

-- bob

 

[Wullie]

Hi mate,

After reading this whole thread again, I still do not see why a printer freindly page could not be an option.

If something is really sacred, and you dont want people to print it off, don't put it on the web. A simple copyright notice does the same as including a header and footer.

What would be to stop a user from copying the source of your page and altering it to stop the header and footer appearing?

Hope this helps Wullie

sales@freshlookdesign.co.uk

http://www.freshlookdesign.com

http://www.thomsonassociates.co.uk

The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell

 

[rhackenb]

I kind of agree but what the customer demands, the customer gets. Insistence breeds creativity. (and it's more complicated than a copyright)

-- bob

 

[Tarwn]

Have you considerd trying to set up a style strictly for printing? You may not be able to get a footer exact, but you could watermark the pages by defining a picture that is display:none in inline CSS and then using a print style to make it visible:

<style media=&quot;print&quot;>
   .myWatermark{
      display:inline;   /* this would insert all the &quot;watermark&quot; class objects into the page during a print or print preview 
   }
</style>

-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
For my next trick I will pull a hat out of a rabbit (if you think thats bad you should see how the pigeon feels...)

 

[rhackenb]

Tarwn,

This looks interesting but I don't quite know how to use this based on your discription. Is this all I add to the document?

BTW, there is now a FAQ describing my solution.

-- bob

 

[Tarwn]

Sorry to have taken so long to respond, that style declaration would go in the head section of your html.
In order for it to be used you would do the following:

<html>
<head>
<style>
<style media=&quot;print&quot;>
   .myWatermark{
      display:inline;
   }
</style>
<style media=&quot;screen&quot;>
   .myWatermark{
      display:none;
   }
</style>
</head>
<body>
<div class=&quot;myWatermark&quot;>This is my watermark, can't see it until you try to print preview or print</div>
<div class=&quot;myWatermark&quot;>of course they need to be placed somewhere so that they will show up in good locations.</div>
</body>
</html>

Those two divs will only be displayed when you try to print preview or print out the page.
So basically you should locate them so that they will be in approximately the same location on every page and have either a watermark image in them or a small piece of text, like so:

<html>
<head>
<style>
<style media=&quot;print&quot;>
   .myWatermark{
      display:inline;
      border:1px solid #aaaaaa;
      color: #999999;
      width:30%;
      text-align:center;
   }
</style>
<style media=&quot;screen&quot;>
   .myWatermark{
      display:none;
   }
</style>
</head>
<body>
content content ....
content content ....
<div class=&quot;myWatermark&quot;>Copyright 2002 Mycompany Inc</div>
content content ....
content content ....
content content ....
<div class=&quot;myWatermark&quot;>Copyright 2002 Mycompany Inc</div>
content content ....
content content ....
</body>
</html>

Now the contents of those two div's will show up in the print preview a 1/3rd of page size box with light grey 1pixel borders, with light grey centered text.

Now we could make them actually look like they are behind the text and so on, but I want to go read your FAQ and see how you did it

-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
For my next trick I will pull a hat out of a rabbit (if you think thats bad you should see how the pigeon feels...)

 

[rhackenb]

Tarwn,

Thanks for answering. I created a web page with the markup you sent. You can see it at:

http://www.eticomm.net/~rhackenb/test/watermark.html

I am clueless when it comes to the use of style sheets (I think style sheets are a Microsoft invention and I tend to avoid Microsoft solutions).

First of all, the color markup that you suggested seems to have no effect for either Netscape 7 or (grudgingly used) Internet Explorer. Is there something wrong with the source code?

Secondly, you solution assumes that I know where the printed page will end. In my application, I just can't predict that since the pages are generated from a CGI script based on the data and plots coming back. Even if I could count the lines being printed out, I wouldn't know what the correct printed page length should be since users can set the page parameters.

I guess if I could use your solution to make a background image to appear, I might make this appear several times on each page. This wouldn't be a bad solution. I will play with inserting an image instead of text to see how it works. The only difficulty that I would have is if an html table of data takes up more than a printed page. I guess I could insert the &quot;<div>&quot; line inside a cell based on line count.

If I can get your solution to work, it won't require me to wrap my whole page in yet another table.

With your permission, I will create a FAQ based on you solution once I get your solution to work the way I want.

thanks,

bob

 

[Tarwn]

Well, this is more of a kludge than a solution, the table footer/header seems to work more consistently (in IE at least).
Stylesheets are asctually not a Microsoft invention, they are a W3C standard (CSS1 CSS2).
Also, there is an error in my html above, I accidentally had an extra style tag right after the head tag. If you get rid of the style tage that doesn't have media defined it should work.


-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
This space has nothing in it, it's all ni your imagination

 

[rhackenb]

I took out the extra <style> and it works! I also went out and got a space shuttle logo and put it in as an <img src...> in one location. That worked also. Reload the file and see it work. I'll make a faq out of this soon.

Now, how do I make it a true watermark where print goes over top of it? (That's not necessary but it would be neat.)

Thanks,

-- bob

 

[Tarwn]

Ok, this is more complicated. There is a z-index attribute in CSS that allows you to define the layer that the specified tag will occupy. What you would need to do in this case is something like this:

<html>
<head>
<style media=&quot;print&quot;>
   .myWatermark{

z-index:-1;

position:absolute;

      display:inline;
      border:1px solid #aaaaaa;
      color: #999999;
      width:30%;
      text-align:center;
   }
</style>
<style media=&quot;screen&quot;>
   .myWatermark{
      display:none;
   }
</style>
</head>
<body>
content content ....<br>
content content ....<br>
<div class=&quot;myWatermark&quot;>Copyright 2002 Mycompany Inc</div>
content content ....<br>
content content ....<br>
content content ....<br>
content content ....<br>
</body>
</html>

Since the browser always starts with layer 0 or 1 by defasult, your telling it to put these watermarks at a lower level then the rest of the page as well as placing them absolutely so that the higher layers will ignore the space they are filling(ie, the writing will run right over top of them).

Also, if you do crete the FAQ I would appreciate a mention

-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

http://www.tuxedo.org/~esr/faqs/smart-questions.html