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 pages of browser. Only one exception is Opera browser, which makes it possible to set up paper orientation by the help of CSS.

Perhaps you have ran across some webzine, news server, or blog from where it is almost impossible to print out readable article. Either right side of text is missing, only first page is printed out, sometimes even only the rest of menu and decorative elements of page are printed. In case of intranet, where all users are familiar with the designer, such defect is a discredit.

Except pages intentionally designed for printing (protocols, reports) intranet users at some times print also other pages of application, which are not primarily identified for printing (forms, summary of tables, grahs). Right here the problem starts. Majority troubles are due to fixed width of elements (typically intranet tables), which overruns the width of paper. Few practical notes 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 on 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. Few new 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 from intranet. The need of users is to display at full data columns in table row. Because it is not possible to wrap numbers, table often exceeds the maximum width of printed page. In such a case recommended liquid design do not help.

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.

Tables set to printing in other than 100% scale, along with non zero table borders sometimes causes not perfect printed table grid. Cell border lines are drawn as not identical thickness lines.

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.

Backgroud of HTML elements at printing

Printing background colors and pictures of HTML elements depend on browser setting. Default setting is not to print background pictures and colors. For printing unification of intranet pages regardless of browser individual setting, it is possible to assign white background of elements in CSS section, as is indicated in previous code example for element th .

Another time, on the contrary, 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, so that creates 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. Not too much usefull for intranet application printing.

updated 18.03.2007