Print friendly websites

printer (1).png

Icons made by Vectors Market from www.flaticon.com is licensed by CC 3.0 BY

 

Most websites have a print-friendly options that basically removes all non-essential content like menus, background colors and things like that. The point is to save as much ink as possible. Sometimes, though, you may want a print version that preserves background images and other stuff that I found quite hard to find on the internet, so here’s a very straight forward guide:

General recommendations

  • Avoid the use of tables. Use divs instead and apply the necessary css to them in order to display them as needed. It’s not as hard as many people think and displays exactly the same in all browsers (including IE6).
  • Create a new .css document specific for the print version. import it using the “media=’print'” option. This will tell the browser to use that css only in the print view.
  • If you have elements that should be displayed only in the web version of the page, you should add a “.noPrint” class on your “media=’print'” css:.noPrint{display:none;}
  • If you have elements that should be displayed int the printer version but not on the screen version, you can add a “.printOnly” class on your “media=’screen'” css:
    .printOnly{display:none;}

 

Preserving background colors
Since this options depends strictly on the printer configuration, CSS tricks must be applied in order to achieve this.

      • By default, the printer will ignore every background it finds, so we must not let it know that we are using a background. To do this, we must put an img element inside a div and enlarge it to fill the div area:


Some text

Working example:


Some text on column 1

Some text on column 2

 

The myTableBG image can be 1×1 pixel, it will expand to fit the div according to the width and height properties. On the other hand, the text will display “in front” of the image thanks to the position:absolute, float:left and clear:none styles.

There’s only on con to this: you will lose flexibility when trying to acomodate the text, since you now have to position it using the left, top, bottom and right properties, instead of the must simpler “text-align”. This is caused because of the floating style of the span.

If you want to display more columns to make it look as a table, just add a “float:left” style on the div. Be sure to add a
after the last div, because otherwise the “float:left” property will cause strange behaviors on some browsers

Sheet margins
Each browser can interpret the stylesheet a bit different depending on the printing method used. Chrome has it’s own printing rendering method, while explorer, firefox, safari and opera commonly use the XPS format that comes with Windows. To override individual behavior, you can use the following css options:

@page port {size: portrait;}
@page {
    margin:1cm;
    margin-top:1cm;
    margin-left:1cm;
    margin-right:1cm;
    margin-bottom:1cm;
}

The @page port {size: portrait;} tells the browser to render the document in portrait position. If you want to print a wider document, you can use landscape.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s