Internet Explorer 8 will not modify HTML5 tags in print stylesheet

HTML5 Web Development Front End Technology

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.