Print Formatting via CSS

There was a post over on End User SharePoint: Stump the Panel that talked to the notion of generating SharePoint reports for print. While the use of a print media stylesheet wasn’t necessarily the only solution to this particular users problem, it was an interesting point that is not often mentioned or implemented well. As opposed to writing a full fledged article I thought I’d offer some informal points on the matter.

Many websites offer single-click facilities for users to print page content, but quite often those buttons call a page that’s been specifically formatted for print, or restructured to purely tabular data. However, it’s amazingly simple to control print formatting via a print media stylesheet, and can save a lot of resources when compared to the approach of standing up separate print scripts and pages.

Before we show you how to do it, let’s look at an example. The Dell Community blogs, notably Direct2Dell are setup with a print media stylesheet. If you were to go to the Direct2Dell blog and view the source, you’ll notice a link reference for a stylesheet that defines the media parameter as “print”. This indicates that the stylesheet in question will be applied when the page is processed by a browser print operation. Likewise, you’ll also see a link reference for a “screen,print” stylesheet. This combination of values indicates that the stylesheet will be used for both print operations, and on screen rendering. This capability means we can contain the core brand elements such as font, color, and other general formatting in our common stylesheet, then apply additional constraints or formatting rules for print media.

The use of a print specific stylesheet is particularly helpful if you’re printing data that you want to avoid page breaks mid-content, or if you want to drop site elements such as nav bars or graphics from print operations; assuming your DOM is constructed with those thoughts in mind.

As an example, if I wanted to hide my header table/div/zone from print operations, I could call out something like the following in a print specific stylesheet:

.header {
  display: none;
}

Assuming my header class is positioned within the DOM correctly, I can hide that entire "zone" of content from printing. Another useful use is to prevent page breaks from occurring within a cell of wrapped text when printed. We could apply this to a specific class, a specific table, or all cells in globally (or any other combination) by simply calling out the print media specific CSS properties. For example, let's say that this entire post was encapsulated in a div with a class called "blogpost", and I wanted to prevent a break from occurring mid-post:

.blogpost {
  page-break-inside: avoid;
}

That's it, it really is that simple. Now you can go forth and retrofit your content for print formatting without having to make additional custom views for print. In addition there's also a host of other CSS media types that can be used for accessibility and other uses; it's never a bad idea to familiarize yourself with those either.