Creating a Pika Print-only Stylesheet

From PikaDocs

By Brian Lawlor & Mark Sawyer
Legal Services of Northern California (http://www.lsnc.net/)

When printing out Case Notes, most users are likely to want just that -- the notes, and not the other information that appears on the Pika case screen. For example, the Case Notes screen (http://www.openpika.org/beta_gallery/beta_case_notes_ie.html) in the Project Claire beta version is jam packed with everything that is contained within the viewport: the page design, icons, entry fields, submit buttons, links, etc., along with the basic case notes. How does one print out just the case notes, to the exclusion of everything else on the page?

The simplest way to pull this off is to create a separate CSS file that controls the presentation of print media (http://www.w3.org/TR/REC-CSS2/media.html#media-types), as opposed to the screen media content that appears on the web page you see in your browser viewport. There are plenty of online tutorials on how to do this sort of thing, two of the best being Printing Web documents and CSS (http://css-discuss.incutio.com/?page=PrintStylesheets) and Eric Meyer's detailed CSS Design: Going to Print (http://www.alistapart.com/articles/goingtoprint/).

Here's a simple, two-step explanation of how we've implemented a separate CSS file for printing out case notes in the Claire design:

• First, add a second CSS link for your print media CSS file to the head tag in the default.html template. Like so many others, we cleverly called it print.css:

• Next, create the print CSS file itself and add it to your /css directory. Make sure its location matches your declaration of its location in the head tag, described above. Here's our version:

body {
    font-family: verdana, arial, sans-serif;
    font-size: 9pt;
    border: 0;
    margin: 0;
    padding: 0;
    }
#page-container {
    border: 0 !important;
    margin: 0 !important;
    width: auto;
    }    
div#banner,
div#horizontal-navigation,
div#icon-navigation,
div.warning-flags,
div.side-content,
div.side-content h2,
div.side-content p,
div.side-content ul,
div.side-content li,
div.main-content #case-tabs,
div.main-content .case-notes,
div.main-content .case-notes-side,
div.main-content #save-note {
    display: none;
    }

The logic of designing a simple print CSS file is to affirmatively declare your font values, as we do for the body selector (http://css.maxdesign.com.au/selectutorial/). Then you declare selectors for all the structural markup elements on the page that you do not want to print out, and give them the CSS property { display: none; }. This tells the print media not to display those structural parts of the page, as we did above for the #banner, #horizontal-navigation and other divs. The result is that everything else on the page is displayed and gets printed.

Because Pika pages are dynamically generated and the source code for any particular page may originate from one or more templates and from one or more PHP files, it can seem daunting to figure out what the structural markup actually is. But there is a easy way to do this: While viewing the page you for which you are creating print media CSS, use your browser's "View Source" function to display the page's source code and then print it out. Then refer to that source code to identify the parts of the markup you do not want to print out, and build out your print.css file from there, as above.

A few additional observations: It may be that you want the content within a part of the page to display and print out, but not necessarily all its characteristics, e.g., stylized borders. For example in our redesign of Pika, all the case notes are embedded within a single div called #page-container. To prevent the border styles of that div from printing out, and to control the width of the content to conform to the default printer layout, we added the following CSS selector:

#page-container {
    border: 0 !important;
    margin: 0 !important;
    width: auto;
    } 

Also, be mindful that setting the size of your font for print media involves different considerations than those for screen media. Although you can use relative values, as you might have done for displaying text in Pika, the results are likely to be unpredictable using different printers. To deal with this difference between print and screen media, what we have done is use body { font-size: 9pt; } to set a fixed font size.

Again, here's the Case Notes (http://www.openpika.org/beta_gallery/beta_case_notes_ie.html) page. Here'e how it prints out (http://www.openpika.org/uploads/case_notes.pdf) using the print.css style sheet, described above.

---

Related articles and files:

• Project Claire: Print Media CSS Code