Informatik und Gesellschaft

Sections
Informatik und Gesellschaft > Research > Plone Lessons > How to Create a Print View that Conforms with Conventional User Expectations
http://ig.cs.tu-berlin.de/forschung/plone/printview/document_view

How to Create a Print View that Conforms with Conventional User Expectations

Clicking the printer icon on a website will typically result in the browser displaying a print preview of the current website which then might be printed. However, Plone behaves differently, not making the user aware of the layout of the print output. We devised a neat solution that conforms with common user expectations based on the existing print stylesheet Plone makes use of.

We believe that we found quite an elegant way of creating a print view that gives the user an impression of what his printer will spit out. Wile Plone makes use of a print stylesheet that renders the webpage for print output what lacks is a convenient way to make the user aware of the print layout before he prints. In fact with standard Plone the user might think that the print layout will equal the screen layout, hence he might start copying the content of the page to an editor before printing it.

Our solution conforms well with standard user expactations, and at the same time makes use of the existing print stylesheet that allows us to dispense with the rendering of a new HTML-page.

Really, what we do is rather simple:

  1. First we created a new macro that outputs the print icon linking to the print view. This you may then insert wherever you see fit.:
      <div metal:define-macro="printButton">
         <p id="print_button">
          <img tal:attributes="src string:${here/portal_url}/print_icon.gif" />
          <a style="font-size: 85%; text-decoration: none;" tal:attributes="href string:${here/absolute_url}/${template/id}?format=print" i18n:domain="plone" i18n:translate="print format">Print Format</a>
         </p>
      </div>
    
  2. The print view itself is nothing but the current webpage with the print stylesheet used as the screen stylesheet.
  3. To this end we pass a parameter format to the server along with the url of the current page. The content of the parameter we set as print. This content is being checked in the relevant page template header :
        <!-- Main style sheets for CSS2 capable browsers -->
        <style tal:condition="python:not request.get('format')== 'print'" type="text/css" media="screen"
               tal:content="string: @import url($portal_url/plone.css);"></style>
    
        <!-- Print style sheets in case format=print is attached to the URL! -->
        <style tal:condition="python:request.get('format')== 'print'" type="text/css" media="screen"
               tal:content="string: @import url($portal_url/plonePrint.css);"></style>
    
  4. Also, we make sure that the custom stylesheet won't be loaded with the print preview :
        <style type="text/css" media="all" tal:condition="python:not request.get('format')== 'print'"
               tal:content="string:@import url($portal_url/ploneCustom.css);"></style>
    
  5. Done! Yeah, easy, isn't it? We did some nice tweaking to the stylesheets too, as you would expect. But that you may see for yourself.
Created by mbaer
Last modified 2004-11-24 06:20 PM