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:

<!DOCTYPE html> <html>  <head>     <style>         @media print {             body {                 color: #000;                 background: #fff;                 font: 13pt Tahoma, Geneva, sans-serif;                 line-height: 1.5;             }         }     </style> </head>  <body>     <h1>Code4Example</h1>     <div>         <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla sed nam dolor maxime, incidunt enim esse quos             illo quas natus. Ea rerum molestias quidem veniam aperiam enim repellendus quam in.</p>         <p>Nisi distinctio est facere omnis odio soluta reiciendis iusto saepe velit praesentium. Eaque id, laborum             corrupti impedit mollitia debitis nemo. Minus possimus assumenda repellat, et enim ipsa id sapiente?             Obcaecati?</p>         <p>Reprehenderit ut qui explicabo eligendi harum doloribus, odio nulla laboriosam error corrupti labore porro             excepturi atque vero earum non alias, quae nesciunt vitae dolores ipsum dicta. Nemo esse nisi placeat!</p>         <p>Illum debitis consectetur commodi nam quos eveniet, enim unde iusto cupiditate quasi soluta iure pariatur.             Aliquam cupiditate est culpa dolorem, exercitationem deleniti quasi. Alias iure officiis doloribus? Odit,             tenetur deleniti.</p>         <p>Assumenda tenetur inventore, ipsam veniam incidunt architecto illum impedit dolore beatae quo iusto in             voluptates eveniet debitis molestias dicta nemo, labore, consequuntur laudantium quis. Voluptas perspiciatis             qui labore optio fugit!</p>         <p>Repellat consequatur voluptates consequuntur corrupti! Perferendis quas aut totam eius, necessitatibus iste             repudiandae ad voluptates placeat nobis odit nostrum asperiores, enim libero magnam qui et quisquam ex             consequatur maxime! Deleniti?</p>         <p>Velit suscipit eius esse cumque perferendis, dolorum voluptatibus soluta voluptatum quia unde nam amet             sapiente deserunt labore quisquam! Accusamus enim illum sapiente. Enim beatae ea iusto eius aspernatur quas             ratione!</p>         <p>Similique maxime commodi esse odio? Delectus alias numquam ex tenetur ad eos velit quos, quam quasi quis             voluptate dignissimos ipsum placeat recusandae a! Facere non sequi cupiditate beatae blanditiis omnis.</p>         <p>Quas rerum ex totam neque pariatur ipsam ratione voluptate itaque ipsum reiciendis autem deserunt consectetur             distinctio nemo voluptatibus, nostrum praesentium ipsa ad, eveniet dolores soluta esse saepe dolorem. Minus,             exercitationem?</p>         <p>Quod debitis assumenda animi saepe facere et aspernatur esse explicabo natus neque culpa fuga officia             praesentium non optio cum quae minima sequi necessitatibus, at illum quam libero quas aliquid. Alias?</p>     </div> </body>  </html>

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         }

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.

<!DOCTYPE html> <html>  <head>     <style>         @media print{             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; }         }               </style> </head>  <body>     <header>         <h1>Code4Example</h1>     </header>     <div>         <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla sed nam dolor maxime, incidunt enim esse quos             illo quas natus. Ea rerum molestias quidem veniam aperiam enim repellendus quam in.</p>         <p>Nisi distinctio est facere omnis odio soluta reiciendis iusto saepe velit praesentium. Eaque id, laborum             corrupti impedit mollitia debitis nemo. Minus possimus assumenda repellat, et enim ipsa id sapiente?             Obcaecati?</p>         <p>Reprehenderit ut qui explicabo eligendi harum doloribus, odio nulla laboriosam error corrupti labore porro             excepturi atque vero earum non alias, quae nesciunt vitae dolores ipsum dicta. Nemo esse nisi placeat!</p>     </div> </body>  </html>

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.

Source: https://getflywheel.com/layout/how-to-style-your-website-for-print-with-css/