How to Style your Website for Print with CSS

What does Print have to do with the Web?

Most of us live online, getting all of our information from the web. We’re connected all day, every day, from many devices. You may have heard that print is dead when, in fact, that certainly isn’t true! We may not print as frequently as we once did, but there are situations where viewing content on a device is just no substitute for having a hard printed copy to look at. Do you have valuable how-to content, redeemable coupons, directions, portfolio examples, or anything else that users would prefer to see in print? If so, setting up custom print rules on your website will certainly help shape the experience for your users.

How to Design for Print

All the magic is contained within CSS by defining print-specific styles. You may find it helpful to create a separate print.css stylesheet so it is separate from all your other styles. Keep in mind that not all sites have a print style sheet; this is an additional feature and step in the development process. If no print styles are specified, the default styles are used for printing. We will be defining styles to make things more efficient for print, which will override any defaults.

The naming convention and specific styles will be unique to your own project’s stylesheet, but these concepts will apply. After the basics are added, go through the default stylesheet of your website and look for any unique situations that need print styles to ensure the best printing experience.

Color and Layout Considerations

Most people prefer to print in black and white due to the expense of colored ink. Also, there is a higher contrast when text is black and printed on white paper. You’re probably familiar with media queries, as they are critical in modern, responsive web design. Media queries are also necessary for creating print styles.

This is what will make text in the body black, and get rid of any background color for best printing:

@media print {
body {
color: #000;
background: #fff;
}
}

Chances are, the text will print out in Times New Roman. There’s nothing wrong with that, but what if you want to specify a different font? Just like you did in your default styles, this can be done in print as well. While we’re at it, let’s not forget the line height.

body {
font: 13pt Tahoma, Geneva, sans-serif;
line-height: 1.5;
}

Hiding Unnecessary Elements

You’ve probably been conditioned to keep the display: none to a minimum, but this is entirely okay for your print styles. By hiding some elements, you are giving your users a better way to print and keeping anything unnecessary from the hard copy. The goal is to allow them to effectively print out the most important content, not the exact web page.

There are page elements that are not necessary, like navigation, footer, sidebar, and background images, so this is where our display: none will come in handy.

@media print {
nav, aside, footer {
display: none;
}

section {
background: none
}
/* section had a patterned background in the default styling which is best removed in the print style */
}

Articles are often printed, so it is great to have each article start on a separate page. It is much easier for the user to organize their printouts if key information is grouped together and not spread across multiple pages.

By adding this to your print stylesheet, the articles will always start on a new page:

article {
page-break-before: always;
}

Keeping the unordered lists together on the same page is a great idea too:

ul {
page-break-inside: avoid;
}

Let’s take it a step further and do the same for headings, images, blockquotes, tables, and other list elements:

h1, h2, h3, h4, h5, h6 {
page-break-after:avoid;
page-break-inside:avoid
}

img {
page-break-inside:avoid;
page-break-after:avoid;
}

blockquote, table, pre {
page-break-inside:avoid
}

ul, ol, dl {
page-break-before:avoid
}

</pre>
<img class="aligncenter wp-image-12547 size-full" src="https://getflywheel-images.s3.us-east-2.amazonaws.com/uploads/2015/08/print-styling-03.jpg" alt="print-styling-03" width="1022" height="480" />
<pre>
<h3>Page margin measurements</h3>

We will be adding a width of 100% to the body and article and getting rid of any unnecessary margins or padding. That way we can strip out any unnecessary spacing.

body, article {
width: 100%;
margin: 0;
padding: 0;
}

Here is where the spacing can really be fine tuned for printouts. It’s not too often that you see centimeters in web design, but it works great for the purpose of determining borders on the page. The @page rule is how we will target the spacing. This example will allow for 2cm around all the borders. This measurement can be customized to allow for more or less space. For instance, your users may want to take notes and allowing for a larger margin would be helpful.

@page {
margin: 2cm;
}

If pages are intended to be printed and put in a binder, keep in mind that there is the option to adjust the margins for every other page. Left page is for pages 1, 3, 5… and the right page is page 2, 4, 6…

@page :left {
margin: 1cm 3cm 1cm 2cm;
}

@page :right {
margin: 1cm 2cm 2cm 3cm;
}

First-page customization comes in handy in certain instances. By using the :first page pseudo-class, the styling of the first printed page can be determined:

@page :first {
margin: 1cm 2cm;
}

Image and Intro Text Ideas

These may or may not apply to your site, but they are good to note nonetheless.

To prevent images from being cut off and bleeding over the edge of the printed page, adding a declaration of a max width will prevent this.

img {
max-width: 100% !important;
}

A nice welcome message is a great addition. Print content will be around for awhile, so it is always nice to include a friendly message or reminder.

header:before {
display: block;
content: "Thank you for visiting my website at www.mysite.com.   Please check back for upcoming specials and new products.";
margin-bottom: 15px;
padding: 5px 8px;
font-style: italic;
}

Now that we’ve covered some of the print consideration basics, it is easy to incorporate these ideas into your print stylesheet. Although print is not what we ultimately think of when we use the web, it is a great way to provide your users with the same great experience no matter how they are accessing content.

Stay Educated With WP Engine

Would you like to learn more about WordPress, and the various ways you can use this platform to your company’s advantage? Subscribe to our newsletter and learn more about our managed WordPress hosting and our flexible hosting plans!