How to Create Printer-Friendly Pages With CSS, for the Twenty Twenty Theme

Make your posts look great on hard copies and PDF files, using only CSS

Working on a backup of my posts – saving them as PDF files – I noticed the result in the printed page was not the same as what’s shown in the screen. Further more, there were things – like images, social links and even the footer – that are not necessary in a hard copy or PDF file.

So this is what I’ll show you how to fix in this post: how to customize with CSS, the way your post is going to look like if you (or someone) prints it or save it as a PDF file.

What’s Wrong?

You know how your posts looks like; but, how do they look when you print them? Take a look at the following screenshots of a sample post: the first two, are pages one and two; and the third screenshot shows how it’s going to look like after we fix the issues.

Notice that all the active elements (the ones with links) print their URL’s; the image is cropped and aligned to the left; the previous and next posts are also being displayed, just like the menus at the bottom.

Note: In these screenshots, the edit link is showing only because I’m logged in.

What Do We Need to Know?

To work on this, we need to get familiar with two things: the “CSS Media Queries” and our own selectors.

The CSS Media Queries

As I always say, go to the source! Check out this one page tutorial from W3 Schools, to get familiar with the CSS Media Queries; there you’ll see that @media can hold four values: all; print; screen and speech. We are going to use the print value.

Know Your Selectors

At the beginning of this series, I mentioned the importance of the use of the inspector, to find the selectors of your blog. Check it out if you need to.

Quick and simple?

To modify how the output is going to look like, all you gotta do is use the selectors as if you were changing your stylesheet with one exception: everything has to be inside the brackets of this new rule we’ll be using, like this: @media print {/*your code here*/}.

Let’s Do This!

At the bottom of your style sheet (which is common practice) write the following:

/* -------------------------------------------------------------------------- */

/*	Media Print
/* -------------------------------------------------------------------------- */
@media print {
/*your snippets will go here*/
}

Now, let’s move on to customize it, using the example I showed you at the beginning.

Hiding the URLs and Some Elements

	a[href]:after,
	.post-comment-link.meta-wrapper,
	.featured-media,
	.sharedaddy,
	.pagination-single,
	.footer-nav-widgets-wrapper,
	#site-footer {
  display:none;
}

To Remove the Underline (If you want)

This snippet is up to you; you may want to leave the underline so people can know they can click on the links (in PDFs documents, of course) But if you want to remove them, simply write down the following:

	a {
		text-decoration:none!important;
		border-bottom:none!important;
	}

To Add a Note

I believe is a good idea to leave a note regarding the license of your work. If you haven’t done it yet, you can go to Creative Commons to get a license (for free, in a few seconds) and put it on your website. Then, copy the text a paste it in this snippet.

	.post-inner:after {
		content:'All Rights Reserved © My Blog by ME is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.'; /* replace with your license */
		font-size:1.2rem;
		color:#888;
		display:block;
		margin:auto;
		margin-top:2rem;
		width:70%;
		
	}

That’s a wrap!

2 replies on “How to Create Printer-Friendly Pages With CSS, for the Twenty Twenty Theme”

Another great post Laly. Thanks. I also hid the post categories and the post meta: using:

.post-meta-wrapper,
.post-meta-single,
.post-meta-single-top,
.entry-categories,

Any thoughts?