IE Print Protector

IE Print Protector is a piece of javascript that allows you to print HTML5 pages in Internet Explorer.

IE Print Protector helps IE render HTML5 elements correctly, both on screen and in print.

News

Remy Sharp's html5shiv now includes IE Print Protector! Remy's script is considered, by most, to be the de facto script for enabling HTML5 elements in Internet Explorer. Remy is the creator of jQuery for Designers and co-author of the upcoming book Introducing HTML5. By including IE Print Protector in such a popular and often hotlinked script, we'll see many more developers safely moving their projects, products, and clients into the world of HTML5.

Liferay's AlloyUI (and by proxy Liferay Portal) now include IE Print Protector! Liferay Portal is an open source web platform used by enterprises around the world to create custom business solutions. It powers major websites like the Cisco Developer Network, Monster Energy Drink, and Sesame Street. By leveraging HTML5 and IE Print Protector in their product, we'll see rapid adoption of HTML5 in the often lagging enterprise market.

Have a website using IE Print Protector? Tell me about it on twitter!

Printing HTML5 in Internet Explorer

Internet Explorer 6, 7, and 8 do not recognize new HTML5 elements. IE treats unknown element start <section> and end </section> tags as void elements. This means unknown elements no longer wrap their contents, making them impossible to style and spilling their contents into the DOM.

In this example we have an article element wrapping a heading and paragraph with some text.

<article>
	<h1>
		Lorem ipsum
	</h1>
	<p>
		Dolor sit amet, consectetur adipisicing elit.
	</p>
</article>

Since Internet Explorer voids the article element, the heading and paragraph are pushed out.

<article />
<h1>
	Lorem ipsum
</h1>
<p>
	Dolor sit amet, consectetur adipisicing elit.
</p>

How IE Print Protector works

To display elements on screen, IE Print Protector uses a shim, a piece of javascript which forces support for HTML5 elements in Internet Explorer.

To display elements correctly in print, IE Print Protector temporarily replaces HTML5 elements with supported fallback elements (like div and span) when you print. IE Print Protector also creates a special stylesheet for these elements based on your existing styles; this means you can safely style HTML5 elements by element name in links, styles, @imports and @media. Immediately after, IE Print Protector restores the original HTML5 element to the page, right where you left it. Any references to those elements and any events on those elements will remain intact.

IE Print Protector in action

Review an example of a page running IE Print Protector. In Internet Explorer, use the File menu to select Print Preview and see how the styling for all HTML5 elements is working. Afterwards, you'll see that a javascript mouseover event is still working.

Download IE Print Protector

IE Print Protector v1.5.1

Minified JS (1.36KB) (854 bytes gzipped)

Uncompressed JS (3.18KB)

IE Print Protector is licensed MIT for your comfort. =)

Want to contribute?

Visit IE Print Protector on Google Code.