Make Printable Page using CSS Print Properties

CSS has done it again, with a single file of CSS a complicated page layout turns to a simple, clear, and friendly for printing purposes, but sadly the properties are not fully supported by recent browsers. Some days ago, I created a print version page for a client, and I would share the experiences in this post.

Include the Print Version

You can make a css file for the print-version style, such print.css and call it to your page with a single line:

<link rel="stylesheet" type="text/css"
href="print.css" media="print" />

If you are lazy enough to create a new file, you can write directly into the same css file as the layout managed. @media make you able to do this:

@media print {
/*Your CSS for Print Goes Here*/
body {
        margin: 1cm; /*Set the margin*/
        background: none;
       }
#banner {
        display: none;
       }
/*End of CSS for Print*/
}

If you don’t have authorize to the HTML files, but still wants a separated css file for the print, you can use @import rule in to existing css file:

@import url(print.css) print;

@media and @import supported in most recent browsers.

Get Rid the Unwanted and Clearer Contents

Let‘s say, you don’t want all banners, graphics, menus, and header appears on the printed version:

 .banners, #graphics, #menus, #header {
        display: none;
        }

Don’t display all background images in all HTML tags:

 * {
        background: none;
        }

Make the content fill all the paper:

 #container, #content {
        width: 100%;
        }

The Pagebreaks

CSS provides properties to arrange breaks on documents to make it as separate pages in print mode. You can clearly recognize the function by properties’ name.

page-break-before:
Value: auto | always | avoid | left | right | inherit
Initial: auto
Applies to: block-level elements
Inherited: no
Media: visual, paged

page-break-before

page-break-after:
Value: auto | always | avoid | left | right | inherit
Initial: auto
Applies to: block-level elements
Inherited: no
Media: visual, paged

page-break-after

page-break-inside:
Value: avoid | auto | inherit
Initial: auto
Applies to: block-level elements
Inherited: yes
Media: visual, paged

page-break-inside

Those values means:
Auto: Neither force nor forbid a page break before/after/inside the element.
Always: Always break before/after/inside the element.
Avoid: Avoid a page break before the element.
Left: (For rendering to left and right pages.) Force one or two page breaks before the element so that the next page is formatted as a left page.
Right: (For rendering to left and right pages.) Force one or two page breaks before the element so that the next page is formatted as a right page.
By default, auto will be used if no value specified.

Further Read:
WestCiv CSS Guide