Mr Branding: How to Create Printer-friendly Pages with CSS

Tuesday, August 28, 2018

How to Create Printer-friendly Pages with CSS

In this article, we review the art of creating printer-friendly web pages with CSS.

“Who prints web pages?” I hear you cry! Relatively few pages will ever be reproduced on paper. But consider:

printing travel or concert tickets
reproducing route directions or timetables
saving a PDF for offline reading
accessing information in an area with poor connectivity
using data in dangerous or dirty conditions — for example, a kitchen or factory
outputting draft content for pen annotations
printing web receipts for bookkeeping purposes
providing documents to those with disabilities who find it difficult to use a screen
printing a page for your colleague who refuses to use this newfangled t’internet nonsense.

The Web and apps can’t cover all situations, but printing pages can be a frustrating experience:

text can be too small, too large, or too faint
columns can be too narrow or overflow page margins
sections are cropped or disappear entirely
ink is wasted on unnecessary colored backgrounds and images
link URLs can’t be seen
advertisements are shown which could never be clicked!

Developers may advocate web accessibility, yet few remember to make the printed web accessible.

Converting responsive, continuous media to paged paper of any size and orientation can be challenging. However, CSS print control has been possible for many years, and a basic stylesheet can be completed within hours. The following sections describe well-supported and practical options for making your pages printer-friendly.

Print Stylesheets

Print CSS can either be:

Applied in addition to screen styling. Taking your screen styles as a base, the printer styles override those defaults as necessary.
Applied as separate styles. The screen and print styles are entirely separate; both start from the browser’s default styles.

The choice will depend on your site/app. Personally, I use screen styles as a print base for most websites. However, I have used separate styles for applications with radically different outputs — for example, a conference session booking system which displayed a timetable grid on-screen but a chronological schedule on paper.

A print stylesheet can be added to the HTML <head> after the standard stylesheet:

<link href="main.css" />
<link media="print" href="print.css" />

The print.css styles will be applied in addition to screen styles when the page is printed.

To separate screen and print media, main.css should target the screen only:

<link media="screen" href="main.css" />
<link media="print" href="print.css" />

Alternatively, print styles can be included within an existing CSS file using @media rules. For example:

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

Any number of @media print rules can be added, so this may be practical for keeping associated styles together. Screen and print rules can also be separated, but it’s a little more cumbersome:

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

Testing Printer Output

It’s not necessary to kill trees and use horrendously expensive ink every time you want to test your print layout! The following options replicate print styles on-screen.

Print Preview

The most reliable option is the print preview option in your browser. This shows how page breaks will be handled using your default paper size.

Alternatively, you may be able to save or preview the page by exporting to a PDF.

Developer Tools

The DevTools can emulate print styles, although page breaks won’t be shown.

In Chrome, open the Developer Tools and select More Tools, then Rendering from the three-dot icon menu. Change the Emulate CSS Media to print at the bottom of that panel.

In Firefox, open the Developer Toolbar (Shift + F2) and enter media emulate print. Print emulation doesn’t remain active between page refreshes, but press the up cursor key followed by enter to re-execute the command.

Hack Your Media

Presuming you’re using a <link> tag to load printer CSS, you could temporarily change the media attribute to screen:

<link href="main.css" />
<link media="screen" href="print.css" />

Again, this will not reveal page breaks. Don’t forget to restore the attribute to media="print" once you finish testing.

The post How to Create Printer-friendly Pages with CSS appeared first on SitePoint.

by Craig Buckler via SitePoint

Mr Branding