Adding a Print friendly CSS or link rel to the website / blog

A print friendly CSS help the web page to promote the visitors to keep the information and images in the proper place and store it for future use. Adding a print friendly CSS is important to increase the users’s experience.

Adding a link rel style sheet.

Adding a link rel style sheet will push the browser to print the webpage. The user should add these following tags before the </head> tag.

adding tags

That way the webpage will render it for the browser. I have tried to add print CSS style sheets using link rel method.

<link href=’style.css’ media=’screen, projection’ rel=’stylesheet’ type=’text/css’/>
<link href=’print.css’ media=’print’ rel=’stylesheet’ type=’text/css’/>

The issue here is that the link will generate two broken links. I got 404 error in these links.

error 1

What is happening here is that the links do not have landing page in the website so the link will automatically forwarded to 404 page. To solve this, you should add the print-specific styles to print.css.

You can also start from the scratch like adding tags in to media tag.

@media print and (width: 21cm) and (height: 29.7cm) {
img {
max-width: 500px;
}
body {
font: 12pt Georgia, “Times New Roman”, Times, serif;
line-height: 1.3;
}
h1 {
font-size: 24pt;
}
h2 {
font-size: 14pt;
margin-top: 25px;
}
header nav, footer {
display: none;
}

}

Like this you can add tags inside the media print tags and add them before the skin tag in blogger template. You can refer the W3 web page about more print friendly CSS.

You can easily add a print and pdf icon in your webpage, if you are not sure about this. Just copy the following code and add it to your gadget box.

<script>var pfHeaderImgUrl = ”;var pfHeaderTagline = ”;var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = ‘right’;var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = ”;var pfBtVersion=’1′;(function(){var js, pf;pf = document.createElement(‘script’);pf.type = ‘text/javascript’;if(‘https:’ == document.location.protocol){js=’https://pf-cdn.printfriendly.com/ssl/main.js’}else{js=’http://cdn.printfriendly.com/printfriendly.js’}pf.src=js;document.getElementsByTagName(‘head’)[0].appendChild(pf)})();</script><a href=”http://www.printfriendly.com” style=”color:#6D9F00;text-decoration:none;” class=”printfriendly” onclick=”window.print();return false;” title=”Printer Friendly and PDF”><img style=”border:none;-webkit-box-shadow:none;box-shadow:none;margin:0 6px” src=”http://cdn.printfriendly.com/pf-print-icon.gif” width=”16″ height=”15″ alt=”Print Friendly Version of this page” />Print <img style=”border:none;-webkit-box-shadow:none;box-shadow:none;margin:0 6px” src=”http://cdn.printfriendly.com/pf-pdf-icon.gif” width=”12″ height=”12″ alt=”Get a PDF version of this webpage” />PDF</a><a href=”https://www.shipmethis.com/2014/05/printcss.html”>Get this</a>

If you want only one style sheets to print and avoid other, then you can use the following tags

@media print {
div.do-not-print {
display: none;
}
}

You can also add the following CSS above the skin tag. This code will not change anything in your website but arrange it for the browser. The code includes image, h tags and background tag also.

@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: ” (” attr(href) “)”; }
abbr[title]:after { content: ” (” attr(title) “)”; }
.ir a:after, a[href^=”javascript:”]:after, a[href^=”#”]:after { content: “”; } /* Don’t show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}

Hope this helps.

Akhil S Kumar23-05-2014

Kindly Share AheadShip Me This