CSS for Print Media for your Web Site

All blogger spend time making his blog beautiful. Blogger want to style his blog or web site by selecting right template for his blog. For WordPress user, there are plenty of themes available free of cost and premium ones also. After selecting a very good, suitable for his content template, Blogger try to write as good a content as he can. Your good content can be worth taking a print out. So, have you tested how your content will look when someone will take a printout? Is it printable or not? Yes, it may happen that your blog post is not printable because your screen style sheet may not suitable for print. Check your article's print preview and see how it looks. In case you do not have CSS print (CSS for print media), I predict it will be too bad layout on print preview according to the standard you want to provide to your visitors and community.

Lets try to give visitors a chance to take a print out of your content by providing style sheet for print media. Printer has some restriction according to page size and other capability. But fixing the look for print is not so difficult and instead it is easy. I myself have added a stylesheet for print media very recently to my this WordPress blog. You can check by using Print Preview (File -> Print Preview in Firefox). In chrome you do not have Print Preview command, so you need to take a print out to see how it looks.

Creating stylesheet for Print:

Here is my print.css file. This can be a good starting point for you to create a style sheet for your blog.

	body {
		background: white;
		font-size: 12pt;
	}
	h1 {font-size:125%; color:#CC6600;}
	h2 {font-size:110%;}
	h3 {font-size:105%;}
	#gads,
	#comments,
	#commentform,
	#footer,
	#sidebar,
	.banner,
	#navigation,
	#postnavi,
	.share,
	#header {display:none}
	div.main {
		page-break-after: always;
		width: auto;
		margin: 0 5%;
		padding: 0;
		border: 0;
		float: none !important;
		color: black;
		background: transparent;
		margin-left: 10%;
		padding-top: 1em;
		border-top: 1px solid #930;
	}
	div.content a:after {
		content: " (" attr(href) ")";
	}
	#content a[href^="/"]:after {
	  content: " (http://www.satya-weblog.com" attr(href) ") ";
	}

Yes, this much is enough for printer to layout the article on my nicely.
Now, I am not a master of CSS but still I want you to create a print.css for your blog, I will only explain the content I have added in print.css, so that you can adjust this for your blog/ web site.

First class is body class.

body {
background: white;
font-size: 12pt;
}

Background color white and color black is good for printer so that it can come correctly on black and white printout and color print out as well. Font-size = 12pt is standard for printed page. So, I am also using it.

Your article may be using heading inside it. I have heading = h1 for post title. and h2 and h3 may come inside post. So, I have defined heading tag font-size. Remember I have changed the font-size of the body element. So, style may need to adjust for other HTML elements also. This way print will come nicely.

h1 {font-size:125%; color:#CC6600;}
h2 {font-size:110%;}
h3 {font-size:105%;}

Now, the next block of CSS code tells to completely hide few HTML elements. This is because those article is not good for print out and user may not be interested in taking print out of those elements. Think of Ads available on your site. Also page width will not allow to take print out sidebar generally available on your blog.
These are the HTML elements, I have removed from print. It generally includes header, footer, sidebar, comment section and few other who are with article but not a contender for printout.

#gads,
#comments,
#commentform,
#footer,
#sidebar,
.banner,
#navigation,
#postnavi,
.share,
#header {display:none}

Here is a CSS code for entire block for article. This will set the padding, margin and remove the float if any on the element. page-break-after: sets page-breaking behavior. Below code about page-break-after tells that break after main element. In my case it is useless as I have only one element with class = main. I could remove this code. The margin and padding used is generally suitable for printer so you can use it without much thinking.

div.main {
page-break-after: always;
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent;

margin-left: 10%;
padding-top: 1em;
border-top: 1px solid #930;

}

Now comes more interesting part. That is modifying the links on the article for print only. On paper, changed color for link only tell that it was a link but does not tells anything about the link. It also does not show where it was going and how the link was related to the content. We can give full URL on the paper so that user can use those URLs in future.

div.content a:after {
content: " (" attr(href) ")";
}

See how it looks! Only those links that will be inside article will be provided with additional text after URL text.
print css link help example
Above content is a class name applied on Div that holds my article. So, the above CSS will only affect for links inside article.

Last CSS part is for making the above code work even if link src attribute does not have full URL. If your relative URL is link this: /tag/javascript, then the above code will add text "http://www.satya-weblog.com" before the URL. The above used is a CSS3 property. So, it will work on newer version of web browser only.

Making use of the just created CSS print stylesheet:

Add this line at your header:
<link rel="stylesheet" href="path to print.css" type="text/css" media="print" charset="utf-8" />
Path change is required in href.

You can also add the CSS style for print inside the normal CSS file for website. Just make a little change to the existing stylesheet.
First change the normal stylesheet (screen) called on HTML heading. Add media=screen,print like below.
<link rel="stylesheet" href="http://o2.satya-weblog.com/wp-content/themes/simple/style.css" type="text/css" media="screen,print" />
Now, wrap all the existing code inside this:

@media screen {
/* your screen style content */
}

Now is the time to add the just created stylesheet for print. Wrap all the CSS print content inside this:

@media print {
/* CSS code for print */
}

Good job. Your article is ready for printer. Save tree, Go green!
Enjoyed the article! Subscribe to the feed or bookmark it for future. Spread the words.
Update: I thought to have a class name "noprint" and use this CSS:
.noprint {display:none}
This way whenever I am creating a new content, I can use the class noprint. Like
<div class="anyclass noprint">...</div>
Otherwise I need to continue on adding new ids, class name like
#gads,
#comments,
#commentform,...

Reference:
A List Apart
http://www.w3.org/TR/css-print/