printer friendly page

Topics: General
Aug 18, 2011 at 12:05 PM


I'm searching for a solution to create a printer friendly layout for already existing pages
that must be easily accessible from each page. (e.g. a button or link)

My first approach was to create a page type with corresponding page layout.
But then I cannot find a solution to provide the switching between the original and the printout layout. I guess here I
will need something like a function to do the job.

Or maybe the solution will look completly different...

Thank's in advance


Aug 18, 2011 at 1:00 PM

Have you considered doing this with CSS for media="print" and a <span onclick="print()">Print page</span>?

If you are not familiar with this approach here is a quick intro:

As an example visit and try to do a "print preview" of this page - you will notice that this print preview has different fonts (fonts that are nice to read) and only present the content for that page (no navigation, footers etc.).

This is how to do it

  1. Add a style element top your template <head /> section like this:
    <link rel="stylesheet" type="text/css" media="print" href="~/Frontend/Styles/Print.css" />
  2. Create the css file and set display: none on elements to hide, change the font so it is print friendly etc.
    Here is a the print css used on out sites:

The nice thing about this is that users can always print your pages using the normal UI in their browser - you do not really need to add a "Print me" button (although this could help users not aware of the fact that their browser got that command already). Also this can give positive SEO results as you do not end up serving duplicate content on two different URL's. All in all the way go go imo.

Aug 18, 2011 at 1:04 PM
Edited Aug 18, 2011 at 1:07 PM


Have you considered a print stylesheet (media type).
Include the following in the stylesheet of the page you want to print (at the bottom):


@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* Inlined to avoid required HTTP */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
Hope this helps,

  UPDATE: Marcus: looks like you beat me to posted while I was typing...;)

Aug 18, 2011 at 1:09 PM

A print-style sheet is not always an acceptable solution... often customers want to have a special header and footer on the printed page and the content in the middle so a separate template is the only solution. In the old Composite 3.8 system, this was easy since you can add a querystring parameter overriding the page-defined template and use whatever template you wanted. This is not possible in C1 so personally i've usually made some extra code in page.aspx.cs, that checks for the querystring ?p, and if its present, it will override the template on the page for that given request, before its rendered.

Aug 19, 2011 at 11:27 AM

In my case working with style sheets did the job :-)

Thanks to all off you!