Control what gets printed from the web - Article

Control what gets printed from the web 2 May 2001

Sounds like one of those things you can't do doesn't it! Well to a certain extent you can. Previously I have talked about how to create a "Printer Friendly" page and now I'm going to describe how to do this without having to use a separate form.

How? Style-Sheets. Don't we just love them! It seems there is nothing they can not do. This article is going to show how we can tailor the look & feel of a page depending on whether its intended media is the display screen or the printed page.

Consider the following two paragraphs:

This one looks just like all the others doesn't it! Print the page out however and you will notice that the font size of this paragraph is different (Print Preview will demonstrate the effects just as well).

This one will appear totally different when you print it as it has been hidden and an alternate paragraph will display which has, in turn, been hidden from the screen.

If you can read this it is because you have printed the page out. Either that or you aren't using a browser that supports this method.

So how have I done this?

First thing I did was define some CSS rules by adding a <style> tag to this page. This tag had a special attribute called "media":

<style media="print">

This media attribute tells the browser that the CSS rules that we are about to define are only to be used when the the page ("media") is being sent to the printer.

Let's assume that we are working in CSS files/pages where you don't use <style> tags then the CSS required to achieve the above effects is:

@media print{

 .printLarger{

  font-size:20pt;

 }

 .printHidden{

  display:none;

 }

@media screen{

 .printShow{

  display:none;

 }

}

So what have we done to each of the paragraphs?

The first paragraph has the "printLarger" class applied to it. All this style does is make the text larger. However, it ONLY does this when being printed, hence the text appears normal until then.

The second paragraph has the "printHide" class applied to it. Printing this page means that that text doesn't appear. However, there is a third paragraph that has the "printShow" class applied to it. This is hiddden from the "screen" media and hence only visible to the printer. This toggling of paragraphs demonstrates how you can tailor content to the target media.

Taking the principle further

Whether or not you will find the abililty to hide text from being printed useful or not is down to you. Personally I can't see it being useful as a security feature and see it being used more to save the user having to print the things that are not relevant off-screen (such as the Search box that appears on all of Codestore's pages).

Forget hiding for now. Let's focus on tailoring content to the intended medium. One major problem when printing pages from the web is scaling. If the page has a specified width that can not be fitted on to page from the printer then it is probably better to let the page scale to the available width. For example consider Codestore. Each page is laid out inside a "main" table that is 730 pixels wide. This is too wide to fit on a piece of A4 paper. What we need is to apply a style called something like "mainTable" to it and then add the following to our CSS page:

@media print{

 .mainTable{

  width:100%;

 }

@media screen{

 .mainTable{

  width:730px;

 }

}

Notice in the above that we have defined the "mainTable" rule twice. This is perfectly legal when each is intended for a different medium. We can use this to change attributes of certain elements depending on how the user is viewing the page. The possibilities are almost endless. I shall leave it with you to go and make use of this...

Further Reading

You can find a detailed explanation of the media Rule on this page from the W3C.
Microsoft also has a page about the media Rule.

Note: You could prevent the whole page from printing if you wanted to. Just add the following CSS:

@media print{

 body{ display:none }

}

All you would get then is lot of blank pages and some confused users.

Earlier I mentioned that this is not really a security feature. The reason for this is that there is not way to stop the educated user from copying the text, viewing the source or doing a screengrab. From either of these they can easily print the page.

Feedback

- Bart
- Tue 14 Aug 2001
What about hiding the header/footer when printing?
This is great information. Do you know if there is a style sheet way to hide the browser header or footer when a user selects File Print? I looked around on the Microsoft site, but didn't find anything that would do the trick.

Reply
1. - Jake Howlett
  - Wed 15 Aug 2001
  Re: What about hiding the header/footer when printing?
  Unfortunately, no there isn't a way to do this. It is down to the user's discretion to choose the format of the Header and Footer from the Print Setup dialog they are presented with. I am 99% sure you can't do this for them. The 1% is reserved for the inevitable know it all who will prove me wrong ;)
  Jake -CodeStore
  
  Reply
  
  Show the rest of this thread
  1. - linda
    - Thu 22 Nov 2001
    Re: What about hiding the header/footer when printing?
    Seems to be that there's a downloadable activeX control for this purpose on http://www.meadroid.com/
    Unfortunately this page was unavailable when i tried getting there. But maybe later?
    Check out http://developer.irt.org/script/1437.htm
    
    Reply
    1. - Rafael Vogel
      - Wed 22 May 2002
      Re: What about hiding the header/footer when printing?
      I found an interesting article at microsoft. It's called "Beyond Print Preview: Print Customization for Internet Explorer 5.5" (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie55/html/be yondprintpreview.asp)
      If you download the "spiffy sample application" you'll see how to supress header and footer.
      I didn't look at the code, but the example is very interesting.
      If you wan't to download it right now, go to: http://msdn.microsoft.com/downloads/samples/internet/browser/PrintTemplates/Rele aseMinDependency/printtemplates.exe
      
      Reply
    2. - trevor
      - Tue 26 Nov 2002
      Re: What about hiding the header/footer when printing?
      The scriptx activeX control (free version) allows you to control headers & footers as well as a few other formatting options. f.factory.printing.portrait = true; f.factory.printing.header = ""; f.factory.printing.footer = ""; f.factory.printing.leftmargin = .55; f.factory.printing.rightmargin = .10; f.factory.printing.topmargin = .10; f.factory.printing.bottommargin = .10; f.factory.printing.Print(true); // false prints automatically with the default printer.
      
      Reply
      1. kaban
        
        Tue 24 Jun 2003
        
        Re: What about hiding the header/footer when printing?
        trevor: what does the "f." before factory... mean? i'm trying to implement the script into my website right now and it doesnt work so far, its not printing with factory.Print(false).
        
        Reply
  2. - Eriani
    - Fri 16 May 2003
    Re: What about hiding the header/footer when printing?
    HI, Is ti really impossible to hide header and footer automatically. Except with theprint stting dialog box? If there's automatically solutions I'll be very interested Thanks
    Jerome
    
    Reply
    1. - Per Gunnarsson
      - Tue 7 Sep 2004
      Re: What about hiding the header/footer when printing?
      Search for "Print Template" at MSDN. Also download the BrochureMachine demo.
      There you will find an answer.
      
      Reply
- Richard Collette
- Wed 21 Nov 2001
Hiding Action Buttons from Web Printing?
As far as I can tell, Lotus overlooked allowing us to assign an ID or class to an action button and therefore, there appears to be no way to hide them when printing much less refer to them for any other control purpose.
Any suggestions? I've thought of using actions viewable only by the browser and placing tags in the action name, but at most this will hide the button text and not the graphic associated with it.

Reply
1. - Paul
  - Wed 20 Nov 2002
  Re: Hiding Action Buttons from Web Printing?
  Hi,
  I have been able to hide the action bar when printed and also the button that commands the print.
  I have done this by putting a "print this page" picture on the page, surrounding it with divs..
  <div id="divNoPrint1"> pic here </div>
  and then having the following code in the "onClick" event:
  setTimeout('document.all.tags("Applet")(0).style.display="none";', 200); setTimeout('document.all.tags("div")(0).style.display="none";', 200); setTimeout('window.print();', 200); setTimeout('document.all.tags("Applet")(0).style.display="";', 200); setTimeout('document.all.tags("div")(0).style.display="";', 200);
  This hides the applet and the print button. I could have just had the print button in the action bar, but have found under a lot of circumstances that it crashes Internet Explorer.
  I seem to remember that this only works in ie also.
  HTH,
  Paul.
  
  Reply
  
  Show the rest of this thread
  1. - Jake Howlett
    - Wed 20 Nov 2002
    Re: Hiding Action Buttons from Web Printing?
    Thanks for the idea Mark but I'm not sure you would catch me doing that. It's what I would call a "fudge" rather than a solution.
    What happends when IE takes longer than 0.2 seconds to render the document for printing?!
    Jake -codestore
    
    Reply
    1. - Paul
      - Wed 20 Nov 2002
      Re: Hiding Action Buttons from Web Printing?
      Hi,
      Great! that must mean you have a better solution...
      It may be a fudge, I completely agree, but I have not been able to find anything else that works,
      Paul.
      
      Reply
      1. Jake Howlett
        
        Wed 20 Nov 2002
        
        Re: Hiding Action Buttons from Web Printing?
        Have you actually read the article you were responding to?
        Jake
        
        Reply
        
        Paul
        
        Wed 20 Nov 2002
        
        Re: Hiding Action Buttons from Web Printing?
        Yes, just did not put 2 and 2 together - please excuse me,
        Paul.
        
        Reply
        
        trevor
        
        Tue 26 Nov 2002
        
        Re: Hiding Action Buttons from Web Printing?
        I have been using a similar approch to Paul, but not using the timeout. We use the scriptX control to print and after the print line. <div id="newPtbl"> put a hotspot inside the table cell call PrintIt(); </div> function PrintIt(){ //hide the table as part of the print function document.all.tblPrint.style.display="none"; //prints page f.factory.printing.Print(true); //redisplays the table document.all.tblPrint.style.display="block"; }
        
        Reply
2. - Chris Melikian
  - Tue 3 Dec 2002
  Use the DOM to set the className....
  Put some in-line script at the top of the form like this...
  <script language="javascript"> var oActionBar = document.getElementsByTagName( "TABLE" )[0] oActionBar.className="actionBar" </script>
  Now use a CSS style rule to hide it:-
  <style media="print"> .actionBar { display : none; } </style>
  That should do it!
  Cheers, Chris.
  
  Reply
  
  Show the rest of this thread
  1. - Matt
    - Sat 8 Mar 2003
    Re: Use the DOM to set the className....
    Has anyone actually tried this with iframes?
    I have an IE only application. I have multiple tiers, with the first being completely unsuitable for print (Flash containing virtual pages). So, I also have an iframe with a format that is more suitable for print. This works totally fine when I use no classes or static classes:
    @media screen { iframe { display: none; } } @media print { iframe {display: inline; } .printShow {display: inline; } .printHide {display: none; } }
    However, when I try to use class names (I have multiple iframes, and the user selects which to print) IE seems not to honor the properties set with script:
    window.frames['frame1'].className = 'printShow'; window.frames['frame2'].className = 'printHide';
    The result is the same as if I didn't bother setting the classNames dynamically.
    Any help would be appreciated.
    contact at: mdbundy - a@t - yahoo.com
    Thanks
    
    Reply
- David Schmidt
- Mon 25 Nov 2002
Print control
First button prints without prompting. Second button opens the preview window Third button opens the page setup
Regards David
<HTML> <HEAD> <OBJECT ID="WB" WIDTH="0" HEIGHT="0" CLASSID="clsid:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT> <SCRIPT LANGUAGE="VBScript"> Sub window_onunload On Error Resume Next Set WB = nothing End Sub Sub vbPrintPage(x) OLECMDID_PRINT = 6 OLECMDEXECOPT_DODEFAULT = 0 OLECMDEXECOPT_PROMPTUSER = 1 OLECMDEXECOPT_DONTPROMPTUSER = 2 On Error Resume Next WB.ExecWB x, -1, "", "" End Sub </SCRIPT>
</HEAD> <BODY> <TABLE BORDER=1><TR><TD> <INPUT TYPE="BUTTON" VALUE="Print" ONCLICK="vbPrintPage(6)"><BR> <INPUT TYPE="BUTTON" VALUE="Preview" ONCLICK="vbPrintPage(7)"><BR> <INPUT TYPE="BUTTON" VALUE="Page Setup" ONCLICK="vbPrintPage(8)"><BR> </TD> <TD bgcolor="green">Print Test </TD></TR></TABLE> </BODY> </HTML>

Reply
1. - Jake Howlett
  - Mon 25 Nov 2002
  Re: Print control
  Looks interesting but I could only get the third button to do anything....
  Jake
  
  Reply
2. - guanha
  - Tue 24 Feb 2004
  Re: Print control
  Try this to print the document
  6=OLECMDID_PRINT 2=OLECMDEXECOPT_DONTPROMPTUSER, 2+1=PRINT_WAITFORCOMPLETION + PRINT_DONTBOTHERUSER
  WB.ExecWB 6, 2, 3, 0
  Parameter 1 options http://msdn.microsoft.com/library/default.asp?url=/library/en-us/com/htm/oen_a2z _22sk.asp
  Parameter 2 options http://msdn.microsoft.com/library/default.asp?url=/library/en-us/com/htm/oen_a2z _5k38.asp
  Parameter 3 options : Undocumented feature !! See also (elaborating on parameter 3 options): http://home.att.net/~wshvbs/wshPrinting_fromPureScript.htm
  And finally a complete suggestion for the solution
  <HTML> <HEAD> <OBJECT ID="WB" WIDTH="0" HEIGHT="0" CLASSID="clsid:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT> <SCRIPT LANGUAGE="VBScript"> Sub window_onunload On Error Resume Next Set WB = nothing End Sub Sub vbPrintPage ( x , y , z ) OLECMDID_PRINT = 6 OLECMDEXECOPT_DODEFAULT = 0 OLECMDEXECOPT_PROMPTUSER = 1 OLECMDEXECOPT_DONTPROMPTUSER = 2 On Error Resume Next WB.ExecWB x, y, z, 0 End Sub </SCRIPT>
  </HEAD> <BODY> <TABLE BORDER=1><TR><TD> <INPUT TYPE="BUTTON" VALUE="Print" ONCLICK="vbPrintPage 6, 2, 3"><BR> <INPUT TYPE="BUTTON" VALUE="Preview" ONCLICK="vbPrintPage 7, 1, 0"><BR> <INPUT TYPE="BUTTON" VALUE="Page Setup" ONCLICK="vbPrintPage 8, 1, 0"><BR> </TD> <TD bgcolor="green">Print Test </TD></TR></TABLE> </BODY> </HTML>
  
  Reply
- Raju
- Tue 22 Apr 2008
Removing the header and footer while printing
How to hide the header and footer in the html page like URL while printing without using page-setup of the printer of the system.

Reply
1. - raju
  - Fri 7 Nov 2008
  Re: Removing the header and footer while printing
  How to hide the header and footer in the html page like URL while printing without using page-setup of the printer of the system.
  
  Reply
- asif attar
- Tue 29 Nov 2011
Hi everyone,
How to set proper margins for taking a print by giving the print command?
Now the left margin is almost nill and when i file the paper after printing i am unable to read what comes under the filing strip under which the papers are placed.
so if some body knows how to set this right, then i request the person to kindly help me in this matter.
I would be greatly obliged.
Thanks and Regards
Asif. Attar

Reply