Don’t Forget the Print Styles!
Before you launch your brand-spankin’ new website, check your print styles! Why? Because your users will be printing your site, whether you like it or not. Even in a world dominated by glowing screens, some users prefer consuming content the old-fashioned way, or may need a hard-copy of a page of your site “just-in-case”.
Where to start?
That one’s easy. Interface designers have a media query that targets print for CSS styles that all modern browsers respect:
@media print { .your-print-styles-here { } }
That should be the last declaration in your CSS file, by the way, to ensure that print styles override all other styles. You may also include a link to a separate print stylesheet, if that level of control is necessary. Just make sure it comes after your main stylesheet(s) in the head of your document:
<link rel="stylesheet" media="print" href="css/PrintStyles.css"/>
The next step would be to set up your page:
@page {
size: 8.5in 11in portrait;
margin: 0.25in;
}
Be aware that users can override your page size and margins, though, and that not all countries use the 8.5×11” standard. Be sure to print at different page sizes, too, just in case something goes awry. The page rule is also a fairly new property, so browser support here might be limited as well to the most modern browsers. Test, test, and test some more!
Next, use the universal star selector to provide some useful resets:
*, *:before, *:after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
transition: none !important;
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
What this CSS code will do is remove any background colors, turn your text black, remove any shadow styling, and remove any interactivity that might cause print layout bugs, and ensure everything prints at full opacity. The black color declaration isn’t necessary, but make sure any white text is printed as black if you choose to include it.
Also, be aware that if you decide to keep background colors in your print layout that users can decide to remove all background colors when they go to print your website. Be sure you don’t include any white text on a colored background, otherwise there’s a good chance text won’t print.
Use of the important declaration is normally avoided like the plague, but since we’re inside of our print media query and it’s the last bit of styling we’re providing for our site, it’s perfectly acceptable. (Specificity should be at its highest at the end of your stylesheet, which is what is happening here).
Hide, Hide, and Hide Some More
Print is a very different medium than a website inside of a screen. Gone are all of your interactions and cool animations. Your print styles should get everything out of the way between users reading the words on the paper. That awesome sticky header you stayed up late crafting? Hide it. The off-screen navigation you implemented for mobile users? Don’t even think about it.
A good catch all might be including something like this in your print media query if you’re using HTML5 elements:
header, nav, aside, footer { display: none; }
main {display: block }
An approach that could be right for you is to also include special helper classes in your CSS to show and hide elements for print media. This requires some planning and forethought on each element, though, which isn’t always possible.
.print-only-block { display: block }
.print-only-inline { display: inline }
.print-hide { display: none }
Fix All the Links
If you have any website links displayed on your site (such as http://www.mercurynewmedia.com), it’s a good idea to break the URLs so they wrap, if needed. This applies to displayed email addresses too. That declaration might look something like this:
a[href^="http://"], a[href^="www."], a[href^="mailto:"] { -ms-word-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; }
Page Break Control for the Win
Don’t let your content be cut in half by the print. Declare page breaks judiciously on important blocks of content, like this:
tr, ul {
page-break-inside: avoid;
}
h2, h3 {
page-break-after: avoid;
}
Be careful about floating any parent elements when using page breaks – if you use floats, child elements won’t respect page breaks.
Inversely, there might be elements where you want to start a new page, such as top level headings and articles:
article, h1 {
page-break-before: always;
}
Images
Images are one of the key reasons why your users may print. Don’t let your images be cut off when printing by including this simple line of CSS:
img {
max-width: 100% !important;
page-break-inside: avoid;
}
This will ensure that the width of an image is only as wide as the printable area of the paper size, and it will tell the browser to avoid cutting off any images.
Best Practices & Gotchas
A best practice would be to make sure all of your non-print media queries include the screen declaration, like so:
@media screen and (min-width:1024px) { .your-screen-styles-here { } }
That ensures your print styles will be inheriting mobile-first styles, which will set you up for print success. I’ve found that mobile device screen and print styles (font-sizes, line-height, and other base typographic styles) translate very well.
Another gotcha is transitions. This CSS property can add a lot of nice visual effects to a site on screen, but can wreak havoc on print styles, adding in many weird visual glitches in print previews and actual prints that are very hard to track down. Make sure you reset any transitions – my rule is to reset to none as outlined above.
Resources
- http://www.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/ (Included some nice examples)
- http://www.smashingmagazine.com/2013/03/08/tips-and-tricks-for-print-style-sheets/
- http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/
- http://www.sitepoint.com/create-a-customized-print-stylesheet-in-minutes/
- http://drublic.de/blog/printing-the-web/