Philadelphia Reflections: Webpage Printing

Webpage Printing

This site offers a Print button for all Reflections and Topics. Formatting the text on the pages to print nicely works quite well; but how to specify what to do with images remains a bit unclear (as of August 2006). Although 95% of users employ Internet Explorer because Microsoft supplies it free with new computers, IE is just about the worst browser to use for printing. Safari is much better, and Firefox is pretty good. Opera is also satisfactory, but Internet Explorer is not recommended. The other browsers are free; find them in Google and download them. For the usual user, that's all you have to know.

If you are curious about the technicalities, read on. The "trick", if it can be called that, to special print formatting is the media attribute for CSS styling. The main stylesheet for this website is called in a LINK statement as follows:

<link rel="stylesheet" type="text/css" media="all" href="stylesheets/reflectionsLayout.css">

The media attribute tells the browser to use this sylesheet for all media types, i.e., for screens and printers. In the pages that are formattted to print is a stylesheet that cascades below the main stylesheet and therefore supercedes it. This stylesheet controls the printing. IE seems to have its own views on font size so we use some conditional comments to coax it to our way of thinking.

Here and there throughout the website are pages that contain onscreen navigation ("jump to top" and that sort of thing). We hide them when printing by saying class="navstrip" which you can see will result in those elements being hidden.

The specification of

<body onload="window.print()">

(all lower case for XHTML purposes) is what forces the print dialog to appear.

The remaining problem is how to specify CSS formatting for images so that text flows around them as we want. The formatting seems to work on screen for all browsers but only on some browsers for printing.

<style type="text/css" media="print">

  body        { margin: 0; padding: 0; width: 100%; }				
				
    #wrapper    { margin: 0; padding: 0; width: 100%; }
		
      #center     { margin: 0; padding: 0; }

      #content    { font-size: 11pt; line-height: 100%; font-family: "Times New Roman", Times, serif; }

        .navstrip   { visibility: hidden; }
				
</style>

<!--[if IE]>
<style type="text/css" media="print">

      #content    { font-size: 14pt; }
				
</style>
<![endif]-->

(my thanks to https://centricle.com/tools/html-entities/ for HTML encoding)

Originally published: Friday, August 04, 2006; most-recently modified: Friday, August 09, 2019

Of course, I understand a little about this post but will try cope with it!!....

Posted by: how to get facebook fans free | Feb 13, 2012 10:00 AM

Yet, much is unclear. Could you describe in more details!....

Posted by: cheapostay discount | Feb 13, 2012 9:38 AM

Pleased to read intelligent thoughts in Russian. I`ve been living in England for already 5 years!....

Posted by: esalerugs.com | Feb 13, 2012 9:16 AM