HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML and is estimated that HTML5 will reach W3C Recommendation by late 2010. Since the new HTML5 has got many new elements and attributes which reflect the usage on modern websites, here IECSS has come up with the solution to print HTML5 pages with a proper format by using their new IE Print Protector.
IE Print Protector, a piece of JavaScript that allows us to print HTML5 pages in Internet Explorer by rendering the new HTML5 elements in a proper format on both screens and also in print. 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 or won’t format the page well and making them impossible to style and spilling their contents into the DOM.
How exactly IE Print Protector works?
To display the new HTML5 elements in almost all the IE browsers, IE Print Protector uses a shim, a piece of JavaScript that forces support for HTML5 elements in all the versions of Internet Explorer.
How HTML5 elements are rendered?
This is what the IECSS team explains: 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 style sheet or CSS 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.
Check out their example HTML5 page with IE Print Protector.
If you found this interesting – you can give it a try by downloading the IE Print Protector Javascript here. And why not share your thoughts about this cool tool.
