There’s lots of web sites out there that have great write-ups regarding leveragine Cascading Style Sheets (CSS) to create printer-friendly web pages. Specifically A List Apart: Going To Print by Eric Meyer. The following leverages the same techniques within the A List Apart website and incorporates the native SharePoint 2010 mark-up top create browser printer friendly pages.

Step 1

Determine where your CSS snippet will go. There’s lots of option for you to choose from depending on how your SharePoint site is configured.

1. I usually create a custom CSS, which overides the CORE.css, and then place the CSS snippet within the custom CSS. Say for example my custom CSS is called custom.css. Within this CSS I have styles that overide the SharePoint styles defined in the CORE.css. To add the printer-friendly CSS snippet into an existing CSS, you simply add a:

   1 2	@media print { }

   And within the media print brackets you nest your printer friendly class definitions (which we will discuss in Step 2.

2. You can also create a seperate CSS file and call it, for example, print.css and reference it from either the master-page or page-layout as needed. Eric Swenson’s blog outlines how to reference custom CSS from SharePoint 2010 very nicely.

   Unfortunately Microsoft doesn’t allow us to define the media types withing the CSS Registration, therefore one must use the more traditional method of linking to the printer friendly CSS. Below is an example of referencing the CSS from the Style Library at the site-collection root:

   1 2	<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/Custom.css %>" After="corev4.css" runat="server" /> <link href="http://YourSiteName/Style%20Library/Print.css" rel="stylesheet" type="text/css" media="print" />

Step 2

Once you have determined the best way to reference the printer-friendly CSS snippet we need to make the page printer friendly by hiding the page elements that we DON’T want to print. Coincidentally SharePoint has a class defined that already does this for us. You see, SharePoint hides certain elements on the master page when that master page us used for dialogue boxes. The style attribute is: s4-notdlg. The first thing we need to do is hide all elements that have the class defined as s4-notdlg.

1
2
3
4
5
6
7
8
9
10

/* for placement within an existing CSS */
@media print {
    .s4-notdlg {
        display: none;
    }
}
/* for placement within a print only CSS */
.s4-notdlg {
    display: none;
}

You can also add this class definition into any custom elements you would like to hide. For example, let’s say you added a footer to the bottom of your pages. The footer is defined within the HTML as:

1
2
3

<div class="footer">
...
</div>

You can add the s4-notdlg into the footer definition which will then hide it when you print the page

1
2
3

<div class="footer s4-notdlg">
...
</div>

Step 3

Lastly we need to stylize the output so that it’s printer friendly.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

 
/* convert font to printer friendly points */
body {
    background: white;
    font-size: 12pt;
}
#s4-workspace,
#s4-bodyContainer {
    width: auto;
    margin: 0 5%;
    padding: 0;
    border: 0;
    float: none !important;
    color: black;
    background: transparent none;
}
a:link, a:visited {
    color: #520;
    background: transparent;
    font-weight: bold;
    text-decoration: underline;
}
a:link:after, a:visited:after {
    content: " (" attr(href) ") ";
    font-size: 90%;
}
a[href^="/"]:after {
  content: " (attr(href) ") ";
}