Optimize your website for print in 5 minutes

 Version française disponible

Is it really useful? I think so! People who print pages on the Internet are probably more numerous than one might think. And it takes 5 minutes, so just do it!

Let’s take a screenplay (almost) like in Hollywood movies:

Mister Nextdoor will not have access either to Internet or to his computer this weekend and did not have enough time to read a long article, but very important for what’s happening next. So he decides to print it to read it later on the plane (yes, Mr. Nextdoor is lucky, he is going on vacation). Once the printing is done, he realizes a little jaded (because yes it’s not the first time) that absolutely all the internet page came out. He ends up with 7 printed pages of an article that needed maybe 3… The menu, related articles, social media sharing links… Everything is there! Anyway, Mr. Nextdoor is relieved, he will be able to read his article “How to conquer your fear of flying?”.

To continue on the same idea of the article explaining how to make your site responsive, I will show you how to make your website optimized for print.

Principle is similar by using the CSS language.

You have to declare a dedicated CSS file for printing. In the header of your pages, you have to add a link to this file by specifying “print” for the “media” attribute, unlike others which usually specify the media “all” (screen, printer, etc.). Check out this page to know more about the media types.

In my case, I use a “print.css” file for my blog, so I add this line:

<link rel="stylesheet" href="https://blog.fabianpiau.com/wp-content/themes/freshy2/print.css" type="text/css" media="print">

This CSS style file will be used only in case of printing. Thus, you can use it to remove all unwanted content such as:

• Header
• Sidebars
• Footer
• Related articles
• Etc.

Here is an excerpt of my “print.css” file:

@media print {
	.sidebar div div {
		display:none !important;
	}
	#header {
		display:none !important;
	}
	#footer {
		display:none !important;
	}
	.yarpp-related {
		display:none !important;
	}
	.meta {
		display:none !important;
	}
	.wp-pagenavi {
		display:none !important;
	}
	.sharedaddy {
		display:none !important;
	}
	#breadcrumbs {
		display:none !important;
	}
	.navigation {
		display:none !important;
	}
	.noprint {
		display:none !important;
	}
}

Note: I use the “!important” keyword to redefine a style already present. The value specified with the “!important” will always overwrite the others.

@media print { [my CSS code here] } is useful to make a CSS code interpretable only in case of printing. If you use this annotation around a piece of CSS code, then you can integrate it into a CSS file used for all media (media="all"). I used both the annotation and the “print” media, just to be sure, but this is not mandatory.

Another (often complementary) solution is to add a dedicated CSS class to hide particular elements when printing. This is useful when the item has no specific attributes (no identifier or a too generic CSS class that we don’t want to hide on the whole page…).

For instance, I have this “noprint” class:

.noprint {
	display:none !important;
}

Now, any element of my site that uses the “noprint” class will be hidden when printed. It cannot be easier!

To see the result in action, you can print this article (consider the planet by doing a print preview or printing as a PDF…).

Related posts

Tips to make your WordPress website secure CSS and Javascript files play hide and seek in browsers’ cache Make your WordPress site multilingual with qTranslate Doing Responsive Web Design: yes, but easily!