site logo

Intranet printing and CSS

Formatting web pages for printing are very different from office documents printing. Great deal of users are somewhat confused by distinction of both methods. While office documents use WYSIWYG to guarantee comformity of text layout on screen and on paper, web pages do not respect this method and there is no reason for doing that. For that purpose .pdf files are used.

Basic target of office package is namely printed paper. Sheet size, orientation and margin setting of printed copy are saved as part of document file and these values are set by document author. Unification of printed documents from different computer and printers is assured by this way.

Web offers limited instruments for page printing. Size, orientation, paper margins is not possible to set by the help of (X)HTML or CSS. These values are set up in browser menu File / Page Setup for all printed web pages. Only one exception is Opera browser, which makes it possible to set up paper orientation by the help of CSS.

Unfortunately there is no mandatory recommendation, or rules how to prepare web pages for printing and each coder prepares page for printing according to his own opinion, in some case this problem is entirely ignored. In case of printing it is on user to deal with problems then. Result can be missing piece of text on the right side, or the first page is printed only. What about it?

How to print troubled web page

Print preview in IE7 and IE8 needs too many clicks. IE do not remember the last used scale and you have to set up that always time after time. IE figures only one page of preview therefore you have to clicks again to check accuracy of next pages. Also setting of displayed page numbers in preview IE forgets. Another preview problem is in FireFox. Usually it hangs in scale type shrink to fit and it is impossible to switch to percent scale, although menu in preview shows percentual scale. Real preview remains in a state shrink to fit. To reset that you have to go to menu Page Setup and there remove "check mark" for shrink to fit.

What if browser would offer preview automatically before printing. Every user could adjust printed page look before paper is spoiled.

Problems when printing web pages

Paper version of web page would contain only essential content. It means complete text of article including supporting pictures, or entire data table in case intranet. On the contrary, active navigation elements and advertisement are of no use on printed copy, therefore does not need to be there.

While web page on screen can be as wide as designer needs (content can be scrolled). In paper there is no slider and effective width of printed page is arround 630 pixels (A4 size), or 650 pixels (letter size). Sorry, but any content behind that limit on the right side is lost. That can be fixed by scaling.

Another problem is when only first page is printed and following pages are blank, or some page elements are rendered "over themselves". That is due to incorrect CSS code for printing. Special issuse is printing background pictures and colors. Explanation follows.

Hide page elements when printing

Prime content of intranet page in general is process data in shape of table, graph, or edit form. Along with prime content there is also secondary content elements like menu, navigation, graphics. That secondary content has no sense in printed page. In fact we need to print only prime content. Sometimes it is useful to add caption with application name, section and other description of data to identify where page comes from. Some blogs works in this way and it is pleasure to print this type of web pages.

Such a way modified page has another benefit. Not modified printed page usually differ in detail from page on screen (line breaks), that can make impression of untidy programmer job. General appearance change on the other hand, confirms programmer effort.

There are few possibilities how to link, or import print style to web page. For intranet with relatively simple design following method is suitable. 


<style type="text/css">
...
/* common code for screen and print */
...
@media screen {
  #caption {display: none;}
  #navmenu {display:block;}
}
@media print {
  body {margin:0; padding:0;}
  #caption {display:block;}
  #navmenu {display: none;}
  th {background: #fff;}
}
</style>

Part of CSS code example above does not require special HTML file, nor special CSS file for page printing. In common CSS section generally valid declarations are listed and at the end of section differences valid for specific output medium only are stated. In case of page output on screen is applied setting according to @media screen: page block navmenu is visible and page block caption stays hidden. For printed copy (and preview) setting according to @media print is applied, so visibility of mentioned blocks are replaced. It is possible to change font, table border and other settings in the subsection media print.  Prime content of page stays visible on screen and print.

Page width

Various types of tables, containing first of all numbers, are usually printed in intranet. The need of users is to display as much data columns as possible. Because it is not possible to wrap numbers, table often exceeds the maximum width of printed page.

When printing at scale mode 100% (only one mode possible in IE6) and default margin setting, maximum printable page width is about 630 pixels for A4, and 650 pixels for Letter paper size. Right part of page over 630 (650) pixels is lost (not printed). Modern browsers are able to adjust print scale so that it is possible to print even wider pages. My favorite print scale is 80% (reading on paper is easier than on screen). That scale corresponds to page width of around 800 pixels.

The limit of page width is applied only when IE6 is used. Other new browsers are able to adjust page to paper by print scaling. For IE6 there is possibility to use MS proprietary property CSS zoom. In section @media print set up e.g table {zoom: 80%;}. Mind the use! Standard browsers do not understand this setting. I do not use this type of scaling and I keep maximum printing width of page layout to 630 pixel.

In order to page content was not glued to browser window border, there is default margin of each page set by browser. When printing, this margin is added to paper margin and so useless double margin grow up. Therefore in CSS code example above, margin of body is set up to zero at printing (padding is applied for old Opera). By this setting a few valuable pixels are obtained.

What if only the first page is printed

When your page layout is based on high blocks of <div>  elements, with CSS property overflow: hidden;  for keeping specified width of element, everything looks perfect on screen and modern browsers have no problem to display such layout. On screen there is always only first page (with unlimited height). The height of printed page is limited by size of paper. After the first page is printed, content overflows to next page and is hidden (as required).

Do not forget to test Your tableless layout in print preview with longer page. In CSS code (section intended for print), remove accessory elements (navigation, advertisement) by the help of display: none and for main contentual element set property overflow: visible;. Then Your web page will be printable.

Backgroud of HTML elements at printing

Printing of background colors and background pictures of HTML elements depends on browser setting. Default setting is not to print background pictures and colors. For printing unification, regardless of browser individual setting, it is suitable to assign white background (overwrite background image) of elements in CSS section for printing, as is indicated in previous code example for element th. Background printing is set in IE menu Tools / Internet Options / Advanced / Print background colors and images. Opera and FireFox have background setting situated in menu File / Page Setup / Print Background.

Another time we need to ensure that the background picture is always printed. Example of such a situation is described in article graph with <div>. Background picture is not declared as property background, but as an element <img>, which is by help of position: absolute set beneath the graph, to create its background.

Page break

Long text, for example manual, can use another CSS property: page-break-before, and page-break-after. In connection with tag e.g. <h2> beginning of each chapter on new page can be managed. Usefull mostly for paper wasting.

updated 08.04.2009