Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Internet Explorer 8 will not modify HTML5 tags in print stylesheet
While doing a print style sheet, you need various HTML5 tags like <nav>, <article>, <div>, <section> etc., which are used for different layout options to your web page which is to be printed.
Chrome, Firefox and Internet Explorer9 enables the users to use such HTML5 tags in their browsers. However, Internet Explorer 6-8, Safari 4x and other such older browsers does not support those tags due to which we can’t apply those layout options in the web page.
So, how can we use those HTML5 tags in Internet Explorer 8? For this, you can use html5.shiv.
First let’s understand about the print style sheet.
What is a print style sheet?
A style sheet is a set of codes which tells the browser about the appearance of the web page in aspects such as size, font, layout, indent, spacing etc.,
A print stylesheet is used to format a web page to print on the paper in an organized manner.
In CSS, we have @media print which is used to format the page which is to be printed.
Example
@media print { body {font-size: 12pt}; header {display: none}; footer {display: none}; margin: 2cm; width: 100%; }
How to create a print CSS?
There are few things which you should keep in mind while you are styling a page which is to be printed. They are −
Define borders and font size
First you should to add margin to the page.
Example
<img src = “example.jpg” onload = “load()” width= “220” height= “300”> page { width: 100%; margin: 3cm; }
Highlight the links
Since the links cannot be clicked on the paper, you should highlight it.
Example
a: link { background: transparent; font-color: blue; text- decoration: underline; }
Hide the videos and audios
Since videos and audios cannot be shown on the paper, there remains gaps on the page which are inappropriate. So, you should hide videos and audios.
Example
.video { display: none; width: 0 !important; height: 0 !important; overflow: hidden !important; }
Note − !important is a rule of CSS which gives more importance to a property. If you use !important
Rule, then it overrides all the previous styling codes for that property on that element.
Hiding other unnecessary elements
There are many areas of a web page which does not need to be printed. So, you should hide those areas. This can be done using display: none.
Example
nav, button { display: none; }
html5shiv & printshiv for basic styling
Let us understand how htmlshiv & printshiv work towards stylesheet.
html5shiv
html5shiv is a Javascript shim for Internet Explorer 6 – 8, Safari 4.x and Firefox 3.x which enables it to support the new HTML5 styling elements.
It is used to create elements using document.createElement for the above mentioned browsers. It has print.shiv which enables HTML5 elements to be formatted while being printed in IE 6-9.
Note
It is found inside <head> tags
It is written under the <script> tag since it is Javascript shim
Example
<html> <head> <title> Print stylesheet example </title> <script src = “/js/html5.shiv.js> </script> </head> <body> <section> <h2> This is an example </h2> <p> text to be entered in the section </p> <section> </body> </html>
printshiv
htmlshiv-printshiv.js is a piece of code which enables styling HTML5 elements in a web page which are to be printed in Internet explorer of versions below 9.
Example
<head> < script src = “/js/html5shiv-printshiv.js”> </script> </head>
Alternative method
You can also use the onbeforeprint and onafterprint event for doing so.
onbeforeprint event occurs when a page is about to print that is before the print dialogue box appears.
onafterprint event occurs when a page is in the process of printing i.e., after the print dialogue box closes.
Syntax
In HTML, < element onbeforeprint = “yourCode”>
In Javascript, object.onbeforeprint = function() { code} ;
Example
Suppose you want to hide a video which is present in a webpage before printing it, then the following code can be written −
<body> <video onbeforeprint = “example”> </video> <script> function example() { document.getElementById( “video”).style.display = “none”; } </script> </body>
Conclusion
Although the updated versions of Internet Explorer, Firefox and Safari does have various features which enables the users to style a page which is to be printed, but the previous versions like Internet Explorer 6-9, Safari 4x etc., does not support such HTML5 elements for formatting the page. In order to make the browser read those codes, you can use html5.shiv and onbeforeprint event of Javascript.
163 Views
