CSS: The Perfect Print Stylesheet

by Andreas Hecht

Even today, there are still many people that want to print out the entire internet. This can have many reasons. Maybe a team seeks to discuss an article’s content in a meeting. Or maybe somebody wants to read your article somewhere where they don’t have an internet connection. To satisfy these people, each website requires a CSS file for printing.

Even today, many people print plenty of articles to read them offline. If you don’t want to lose readers, you should provide options for these visitors. However, there are two hazards on the way to printing.

First: today, there are barely any WordPress themes that come with a print stylesheet. The theme developers don’t put an effort in that, even though, for me, developing a print CSS is common courtesy. Second: as no print stylesheet is available, the ultimate consumer that uses the theme doesn’t have access to a print button.

Thus, in this article, I’ll show you how to create a print CSS, how it should be integrated into the theme, and how to create a print button.

Creating the Optimal Print Stylesheet

First, create an empty CSS file with a pure text or HTML editor. Name it print.css. Then copy and paste the following into the file:

/**
 * Print stylesheet for yourwebsite.com
* @version         1.0
* @lastmodified    16.06.2016
*/

@media print {
   Your notes
}

All CSS settings go between the opening and the closing bracket.

1 – Defining Side Borders and Font Sizes

First, we need to define the distances between the side edges, to receive an optimal result.

/* Setting content width, unsetting floats and margins */
/* Attention: the classes and IDs vary from theme to theme. Thus, set own classes here */
#content,#page {
width: 100%; 
margin: 0; 
float: none;
}

/** Setting margins */       
@page { margin: 2cm }

/* Or: */
@page :left {
margin: 1cm;
}

@page :right {
margin: 1cm;
}

/* The first page of a print can be manipulated as well */
@page :first {
  margin: 1cm 2cm;
}

I recommend using the above settings, and defining margins to 2 cm. After that’s done, the font size settings can be chosen. Here, you should keep in mind that the printer requires different units for the font size than the monitor. Thus, you need to convert pixels, em, and rem into points.

• Pixels => Points
• 6px => 5pt
• 7px => 5pt
• 8px => 6pt
• 9px => 7pt
• 10px => 8pt
• 11px => 8pt
• 12px => 9pt
• 13px => 10pt
• 14px => 11pt
• 15px => 11pt
• 16px => 12pt
• 17px => 13pt
• 18px => 14pt
• 19px => 14pt
• 20px => 15pt
• 21px => 16pt
• 22px => 17pt
• 23px => 17pt
• 24px => 18pt

A font size of 12pt has proven to be best. Now, you have the choice which font you would like to use for the print. On paper, fonts with serifs, like Georgia, are well readable.

/* Set font to 16px/13pt, set background to white and font to black.*/
/* This saves ink */
body {
font: 13pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
background: #fff !important;
color: #000;
}

h1 {
font-size: 24pt;
}

h2, h3, h4 {
font-size: 14pt;
margin-top: 25px;
}

2 – Using Pagebreaks – Defining Pagebreaks

The three CSS attributes page-break-before, page-break-after, and page-break-inside allow you to decide exactly where a print page will be broken. Among other things, this will prevent images from being broken into two pieces.

• page-break-before determines if and how a pagebreak is set before this element.
• page-break-after takes care of breaks behind an element.
• page-break-inside can cause a break within an element, like images or graphics, for instance.

/* The following settings are possible: */
page-break-after  : auto | always | avoid | left | right
page-break-before : auto | always | avoid | left | right
page-break-inside : auto | avoid

Auto is the print element’s standard, always places a break every time, avoid prohibits the break, and left, and right are meant for continuation pages that are formatted left or right, accordingly. If applied properly, these rules would look as follows:

/* Defining all page breaks */
a {
    page-break-inside:avoid
}
blockquote {
    page-break-inside: avoid;
}
h1, h2, h3, h4, h5, h6 { page-break-after:avoid; 
     page-break-inside:avoid }
img { page-break-inside:avoid; 
     page-break-after:avoid; }
table, pre { page-break-inside:avoid }
ul, ol, dl  { page-break-before:avoid }

3 – The Handling of Links

Links should be highlighted so that they get noticed. As links can not be clicked on a piece of paper, we need to visualize the link targets. This is done with the following notes:

/* Displaying link color and link behaviour */
a:link, a:visited, a {
background: transparent;
color: #520;
font-weight: bold;
text-decoration: underline;
text-align: left;
}

a {
    page-break-inside:avoid
}

a[href^=http]:after {
      content:" < " attr(href) "> ";
}

$a:after > img {
   content: "";
}

article a[href^="#"]:after {
   content: "";
}

a:not(:local-link):after {
   content:" < " attr(href) "> ";
}

4 – Hiding Videos and Other iframes

Displaying videos on a printed piece of paper doesn’t make sense. However, when setting the iframes on display: none, ugly gaps remain. The following code allows you to remove the gaps and hide iframes, as well as videos entirely.

/**
 * Making intergated videos disappear, and removing the iframes' whitespace to zero. 
 */
.entry iframe, ins {
    display: none;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    line-height: 0pt !important;
    white-space: nowrap;
}
.embed-youtube, .embed-responsive {
  position: absolute;
  height: 0;
  overflow: hidden;
}

5 – Hiding Unnecessary Elements

Many areas of a website can’t be printed. For one, they don’t provide any relevant information, and for another, printing these areas is a waste of ink or toner. Thus, we will hide all areas that are not relevant.

For you, this means that you can dive into your website’s source code to find the areas that you don’t want to be printed. It makes sense to hide the following things:

The header, the navigations, the pagination, the sidebar, the tags, and the categories, the comments, the share buttons, and other elements.

/* Hiding unnecessary elements for the print */

#header-widgets, nav, aside.mashsb-container, 
.sidebar, .mashshare-top, .mashshare-bottom, 
.content-ads, .make-comment, .author-bio, 
.heading, .related-posts, #decomments-form-add-comment, 
#breadcrumbs, #footer, .post-byline, .meta-single, 
.site-title img, .post-tags, .readability 
{
display: none;
}

6 – Adding Messages Before and After Printing

Sometimes, it can be very useful to be able to add messages before and after the actual print content. This type of message allows you to thank your reader for printing your article. Or you can display a copyright message. Once again, it is important to find the proper CSS class of your content area.

/* Adding custom messages before and after the content */
.entry:after {
content: "\ All Rights Reserved. (c) 2014 - 2016 ";
color: #999 !important;
font-size: 1em;
padding-top: 30px;
}
#header:before {
content: "\ Thank you for printing our article. We hope that some of our other articles can catch your eye as well.";
color: #777 !important;
font-size: 1em;
padding-top: 30px;
text-align: center !important;    
}

The Complete Print Stylesheet

/**

* Print Stylesheet fuer Deinewebsite.de

* @version 1.0

* @lastmodified 16.06.2016

*/

@media print {

/* Inhaltsbreite setzen, Floats und Margins aufheben */

/* Achtung: Die Klassen und IDs variieren von Theme zu Theme. Hier also eigene Klassen setzen */

#content, #page {

width: 100%;

margin: 0;

float: none;

}

/** Seitenränder einstellen */

@page { margin: 2cm }

/* Font auf 16px/13pt setzen, Background auf Weiß und Schrift auf Schwarz setzen.*/

/* Das spart Tinte */

body {

font: 13pt Georgia, “Times New Roman“, Times, serif;

line-height: 1.3;

background: #fff !important;

color: #000;

}

h1 {

font-size: 24pt;

}

h2, h3, h4 {

font-size: 14pt;

margin-top: 25px;

}

/* Alle Seitenumbrüche definieren */

a {

page-break-inside:avoid

}

blockquote {

page-break-inside: avoid;

}

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

page-break-inside:avoid }

img { page-break-inside:avoid;

page-break-after:avoid; }

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

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

/* Linkfarbe und Linkverhalten darstellen */

a:link, a:visited, a {

background: transparent;

color: #520;

font-weight: bold;

text-decoration: underline;

text-align: left;

}

a {

page-break-inside:avoid

}

a[href^=http]:after {

content:“ <“ attr(href) “> “;

}

$a:after > img {

content: ““;

}

article a[href^=“#“]:after {

content: ““;

}

a:not(:local-link):after {

content:“ <“ attr(href) “> “;

}

/**

* Eingebundene Videos verschwinden lassen und den Whitespace der iframes auf null reduzieren.

*/

.entry iframe, ins {

display: none;

width: 0 !important;

height: 0 !important;

overflow: hidden !important;

line-height: 0pt !important;

white-space: nowrap;

}

.embed-youtube, .embed-responsive {

position: absolute;

height: 0;

overflow: hidden;

}

/* Unnötige Elemente ausblenden für den Druck */

#header-widgets, nav, aside.mashsb-container,

.sidebar, .mashshare-top, .mashshare-bottom,

.content-ads, .make-comment, .author-bio,

.heading, .related-posts, #decomments-form-add-comment,

#breadcrumbs, #footer, .post-byline, .meta-single,

.site-title img, .post-tags, .readability

{

display: none;

}

/* Benutzerdefinierte Nachrichten vor und nach dem Inhalt einfügen */

.entry:after {

content: “\ Alle Rechte vorbehalten. (c) 2014 – 2016 TechBrain – techbrain.de“;

color: #999 !important;

font-size: 1em;

padding-top: 30px;

}

#header:before {

content: “\ Vielen herzlichen Dank für das Ausdrucken unseres Artikels. Wir hoffen, dass auch andere Artikel von uns Ihr Interesse wecken können.“;

color: #777 !important;

font-size: 1em;

padding-top: 30px;

text-align: center !important;

}

/* Wichtige Elemente definieren */

p, address, li, dt, dd, blockquote {

font-size: 100%

}

/* Zeichensatz fuer Code Beispiele */

code, pre { font-family: “Courier New“, Courier, mono}

ul, ol {

list-style: square; margin-left: 18pt;

margin-bottom: 20pt;

}

li {

line-height: 1.6em;

}

}

view raw print.css hosted with by GitHub

The Right Location: Where does the print.css belong?

The following functions belong into the theme’s functions.php or into a custom site plugin.

“Into the header” would be the correct answer. The following function is the right choice when a developed theme is to be added to the official theme index:

/* The proper function for the addition of the print.css */

function drweb_print_styles(){
    wp_enqueue_style(
        'drweb-print-style', 
        get_stylesheet_directory_uri() . '/css/print.css', 
        array(), 
        '20130821', 
        'print' // print styles only
    );
}
add_action( 'wp_enqueue_scripts', 'drweb_print_styles' );

If you don’t want to supply your theme with a print stylesheet, the method described above isn’t necessarily optimal. First, the CSS is loaded on all pages, and not on individual articles only, and second, it blocks the page display, while slowing down your website a bit. Thus:

Every CSS That Is Not Required For the Page Display Belongs Into the Footer!

On top of that, it should only be loaded when single.php is accessed with the individual articles. There should barely be anyone that wants to print your landing page.

That’s why we’ll let the stylesheet load in the website’s foot area.

/* The code's modified version only adds the print.css to the footer of single articles */
function drweb_print_styles(){
    if( is_single() ) {
    wp_enqueue_style(
        'drweb-print-style', 
        get_stylesheet_directory_uri() . '/css/print.css', 
        array(), 
        '20130821', 
        'print' // print styles only
        );
    }
}
add_action( 'wp_footer', 'drweb_print_styles' );

User-Friendliness: Creating a Print Button

When offering a well-done print stylesheet to your readers, it would be advantageous to also integrate a print button into your theme. The procedure is rather simple, as CSS allows you to design the button the way you want it to be. The code on my website looks like this:

<?php
function ah_print_button() {
?>    
<div class="printversion">
<header><span>Print Version</span></header>
 <a class="printit" href="javascript:window.print()"> <img src="//pathtoyourgraphic" width="146" height="20" alt="Print Page"> </a> 
</div>
<?php }

In the theme, this button can then be called up wherever you want it to appear with a simple <?php ah_print_button();?>

(dpe)