6

How do I print rotated content (divs) in IE8? The DXImageTranform filter options do not appear to be printable.

http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85)

Just to put this into context. I'm writing a pure dom-based canvas library called simpleCanvas. I am desperately trying to offer rotation of text, rectangles and images in IE8 without using a VML fallback, because it's ugly and slow, and error prone. A VML fallback is on my todo list as I concede that it's the only way I know how to do this in IE8 without additional tools. I'm hoping that there is some trick that I'm missing that doesn't come with a third party or server side requirement. If you have found it, a bounty is coming your way.

Matt Esch
  • 22,661
  • 8
  • 53
  • 51
  • Sadly, you can't rotate things in IE8 without CSS or using images. And even more sadly, the filter bug is on the browser-level, so patching it doesn't seem plausible. – Zirak Oct 15 '12 at 20:53
  • Is it that you want the entire page rotated, or just to be able to display rotated elements within the page? – PhonicUK Oct 17 '12 at 13:26
  • I agree with Zirak. I'm going to speculate that this might be barely possible with an ActiveX HTA—e.g. start with [getting a screenshot to the printboard](http://stackoverflow.com/questions/60455/take-a-screenshot-of-a-webpage-with-javascript), if you can figure out how to from the clipboard with ActiveX you'll be there—but I'm seriously doubtful. You're talking about overriding browser-level functionality on a fundamental level, which is difficult partly because of the security ramifications. – Jordan Gray Oct 22 '12 at 11:03
  • (BTW, just remembered, [Snap Engage use a Java Applet](http://www.snapengage.com/) to get screenshots.) – Jordan Gray Oct 22 '12 at 13:07

5 Answers5

1

This is a massive stretch but is the best idea I could come up with:

Explorer Canvas - https://code.google.com/p/explorercanvas/ - Implements the canvas in IE8 by abusing VML.

HTML2Canvas - http://html2canvas.hertzen.com/ - Can render your document onto a canvas, which can then be rotated.

Failing that, I suspect your only option is going to be to generate a rotated document server-side and give that to the client for printing.

Edit: One other last ditch would be to handle the printing via Silverlight, embedding the page in a browsercontrol inside silverlight (yuck), rotating that and printing the result via SL.

Really grasping at straws here though for anything client side in a legacy browser.

PhonicUK
  • 13,486
  • 4
  • 43
  • 62
  • All of these options I am aware of, and they aren't good enough. So far I think server-side rendering is the best option (which I have implemented with wkhtmltoimage) but I really think it's odd that DXImageTransform will never print and there isn't an alternative. There are all sorts of solutions with plugins (flash, java, silverlight), but I am yet to find an answer that will work by setting properties/styles on raw html elements. Remember that IE8 is slow enough as it is without generating VML or loading plugins at print time, or indeed waiting for the server to generate an image. – Matt Esch Oct 17 '12 at 13:04
  • The reason that DXImageTransform doesn't work is because it only applies when DirectX is being used to render the document on the screen, which of course doesn't apply when it hits the printer. – PhonicUK Oct 17 '12 at 13:11
  • Or rather, it's strange that a browser offers features that are unprintable. – Matt Esch Oct 17 '12 at 13:15
  • 2
    I think I've exhausted avenues of research for this without resorting to plugins. IE8 just will not do this when printing. Your customers will have to accept waiting for the server to do it as a trade-off for using an older browser. For those who find the delay isn't acceptable, they'll have to use another browser. Sorry I couldn't help any further. – PhonicUK Oct 17 '12 at 13:39
  • Thanks for trying. I have visited all of your solutions at some point, I was just hoping that maybe some guru out there knew of some VBScript hack or anything that would render rotated printable html elements without VML. I'm doubtful such a hack exists but this is my attempt at finding it. – Matt Esch Oct 17 '12 at 13:51
  • 1
    I admit defeat on this. It's not possible to achieve rotation the way I want to, and this answer covers the best alternatives. I would highly suggest server side rendering before VML or Flash. I will bake this option into my simple canvas library so that the canvas can easily be reproduced on the server side. – Matt Esch Oct 23 '12 at 15:00
0

According to Printing webpage with rotated text in Internet Explorer 9 you need to use -ms-transform too. Be sure to read the EDIT too as there is something buggy.

Community
  • 1
  • 1
alexandernst
  • 14,352
  • 22
  • 97
  • 197
0

Would https://developers.google.com/chrome/chrome-frame/ be acceptable? I'm guessing not if its a LOB application, but it'd give you the features you need without taking the user out of IE8 in the strictest sense. Just another avenue to explore.

PhonicUK
  • 13,486
  • 4
  • 43
  • 62
  • An avenue I've already explored, and yes it is a solution to making a page when running in IE8 display correctly. I have enabled chrome frame on my site, however some clients were unable to install chrome frame despite the fact it can work without admin rights. There are ways of getting around IE8 but that's not what I am trying to do here. I am trying to get away with using IE8 as it exists on a standard installation. I should be able to distribute a module that renders rotated text among other elements that print without imposing third party or server-side requirements. – Matt Esch Oct 17 '12 at 13:22
0

https://code.google.com/p/jqueryrotate/ - This will rotate images, it uses VML to do it in IE8. The caveat is that any text you wanted to rotate would have to be as an image.

PhonicUK
  • 13,486
  • 4
  • 43
  • 62
0

I've never used it and it would be some work but have you tried svgweb? Basically it uses SVG if the browser supports it and Flash if it doesn't. Because it's a flash object you can print it like an image once rendered.

Here's a few more demos of it: svgweb Demos

Jeff
  • 846
  • 8
  • 13