logo

Control what gets printed from the web

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

    • avatar
    • 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.

    1. 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

      Show the rest of this thread

  1. 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.

      • avatar
      • 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.

      Show the rest of this thread

      • avatar
      • 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.

      Show the rest of this thread

  2. 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>

    1. Re: Print control

      Looks interesting but I could only get the third button to do anything....

      Jake

    2. 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>

    • avatar
    • 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.

      • avatar
      • 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.

  3. 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

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:



Navigate other articles in the category "Forms"

« Previous Article Next Article »
What to do after deleting a document   Printing with Page Breaks

About This Article

Author: Jake Howlett
Category: Forms
Keywords: CSS; print; style;

Options

Feedback
Print Friendly

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »