Adding print styles to your website

Overview

This article details the process of adding print styles to your web, to make content more print friendly both from a readability/accessibility point of view, and from the point of removing clutter and reducing print cost.

Step 1 — Agree on a Strategy

There are a number of ways in which you can handle print styles for a website. Discuss the following approaches with your team, and present examples of how that would look like.

Approach 1 — Repurpose web styles for both mediums (Recommended)

For example, one common strategy is to just apply the site’s styles to both `screen` and `print` mediums ( media=“all” ). mediums. That way, your print styles will just consist of overrides of the screen styles, such as hiding certain elements, removing (Or reducing in size) imagery to reducing print costs, etc.

Approach 2 — Print-only styles

Another strategy, and this is dependent on the complexity of your site’s content is to restrict the site’s styles to only apply to the screen medium. Such that, when a user prints, there will be no styles applied to the content and only default browser styles applied to headings, lists, etc. This approach maybe useful if you’re wanting more control over how content is laid out, however it will require more time styling each component.

Step 2 — Create an Audit List

Develop a list of URL’s to pages that expose all of your content types’ and component templates.

Step 3 — Create a print only stylesheet

Create a new print.scss file to hold your print styles. You could target print media inline in your styles, however it maybe a lot quicker to maintain all print styles in one file, as there shouldn’t be many override styles. If you wish to take a more componentised approach, you could still use print.scss and then include partials for each component.

Amend your module bundler to output your print.css file … Example webpack.config.js config below …

# webpack.config
  ...
  entry: {
    app: [`${inputDir}/js/main.js`, `${inputDir}/scss/main.scss`],
    print: [`${inputDir}/scss/print.scss`],
    ...
  }

Step 4 — Emulate print media type

With the help of Chrome’s Rendering tools, you’ll be able to quickly preview a page’s content from your audit list ( As created in Step 2 ) with print styles applied, this saves you from having to print pages to PDF’s etc.

Step 5 — Apply print style fixes

The following is a general checklist that will improve your print styles …

1. Screen-only elements
   Hide elements that don’t need to show up in print, having a .screen-only utility class maybe helpful here, which set to display in our print stylesheet, and hide in our screen stylesheet. This could be applied to Header, Footer, interactive elements like Buttons, Toggles, etc.
2. Print-only elements
   Hide content that is only intended to show in print with a .print-only class which is set to hide in our print stylesheet, and display in our screen stylesheet. This could be applied to replacement texts e.g. textual links, textual representations of elements etc.
3. Remove extra spacing
   Reduce unneeded spacing to reduce printing paper costs!
4. Remove backgrounds and imagery
   Remove solid backgrounds and imagery, to reduce printing costs!
5. Improve accessibility
   Improve accessibility by change text colours to solid black for improved readability, and adjust font sizes to ensure those are more readable in print.
6. Page breaks
   Force page breaks for certain elements.