Develop Reference

Printable rotation in IE8

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.

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.

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.

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.

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.

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

Is there a way to transform a Raphael paper result to PNG/SVG in any browser (including older IEs)?

I've seen a lot of people fighting with this matter, but I can't find a proper solution, nor one that fit my needs.
I'm doing some charts with Raphael, and I basically need to get them as PNG (for export, or later use in a PDF, and some other stuff). For Firefox, Chrome, IE 9, and any other browser with SVG support is easy. There are actually two ways to achieve it: using canvg to render the SVG into a canvas element and then obtain the image data; or sending the SVG to the server (C#) and using a library to rasterize it.
The problem is, of course, IE 8 and 7. In these browsers, Raphael outputs VML, and there is no way apparently of getting the SVG source. I couldn't find any VML rasterizer, so it lets me one only solution: to translate the VML to SVG, or to redraw the paper in SVG.
I checked the vectorconvert library por PHP, that actually uses XSLT transformations to translate VML to SVG, but I couldn't make it work (I've tried several tools to test the XSL but neither seem to work).
I tried to force Raphael to output SVG to a hidden div, by changing its properties .type, .svg, and .vml properly, but that didn't work either.
I think there might be a way to write the SVG tree into a hidden DIV while in IE; despite the fact it won't be shown by the browser, the text should be there.
Does anyone knows a way to achieve it? Thanks!

To render SVG you can also use CanVG library.
It is SVG parser and renderer with canvas resulting output.
Next you can simply output pixel data from canvas to PNG.
To resolve IE limits you can use Chrome Frame.

IE9 3d surface chart

I'm looking for an API or some sort of solution to do 3d surface charts within IE9, and I like how javascript-surface-plot works, but it does not work in IE9.
Are there any other ways to do 3d rendering like that for charts in IE9?
I'm using Telerik controls for my other charts, but they do not seem to have a 3d surface chart.
I've also considered the use of a java applet, but would like to keep the load lightweight.
Flash is not an option.
Just to clarify, when I say "3d" I don't mean shiny bar charts. I mean a x,y,z rendered scene that can be rotated with the mouse similar to how java-script-surface-plot is done.
Thanks!

If you like the 3D surface plot in JavaScript and you want to use IE it seems as though you just need to take use of explorercanvas (a polyfill) to make it work in IE. It's just adding another JavaScript file though, and this way you don't need to use any plugins or applets!

I've never used this, but d3 looks pretty cool and might do the job. Take a look at this example.
Edit:
After further investigation, I'm not sure that's what you'd need, though d3 does look pretty good, wouldn't you admit?
It does appear it'd be pretty easy to change it to work in IE9
take a look at this function in SurfacePlot.js
function createCanvas()
{
canvas = document.createElement("canvas");
if (isIE())
{
G_vmlCanvasManager.initElement(canvas);
canvas.style.width = width;
canvas.style.height = height;
}
//...rest of the code here
}
It'd bee tempted to just remove those lines relating to isIE() in your local copy and say if you're using IE8, be damned ! (That or attempt to use Flash Canvas). IE8 has little support for VML, and I think excanvas runs even slower in IE8 than IE7.

Oops. Looks like my isIE() function was well out of date. I've now added better IE and canvas-support detection to the surface plot. Sorry for the hassle. http://code.google.com/p/javascript-surface-plot/downloads/detail?name=JSSurfacePlot-V1.5.zip&can=2&q=

Can we use canvas.toDataURL on IE7 and IE8?

I am using toDataURL() method of a canvas object. It works on IE9 and Chrome.
But it is not supporting for IE7 and IE8. I found this link
https://github.com/sampula/SVG.toDataURL/commit/9b59af148b7f14d41974cf318eed6f84c8c91062
It extends SVG to use toDataURL(). But in its implementation, it again uses canvas.toDataURL(). I am using Google's API (jquery.flot.js) for plotting all the graphs graphs. But it also uses canvas to plot the graph. So, SVG is not an option.
I there ever a way to use canvas.toDataURL() or something similar for IE7 and IE8.
Thanks in advance

IE7/8 does not support either Canvas or SVG.
It does however support VML, which is a vector language similar to SVG, and there are a number of javascript-based hacks for IE that use its VML functionality to emulate both Canvas and SVG in this older browser.
The most well known IE-Canvas hack is this one: http://code.google.com/p/explorercanvas/
I haven't spent much time with it myself, so I can't vouch for whether it can do specific functionality such as the toDataURL() method you're asking about, but if you can't do it with this, then it's unlikely to be possible at all.
I mentioned that there are similar tools for VML->SVG as well. If that's of interest to you, then you might want to look into this one: http://code.google.com/p/svg2vml/
Bear in mind that no matter how clever these hacks are, there is always a fundamental issue of performance. IE7/8's javascript interpreter is very slow by modern standards, and these are javascript-based tools trying to shoehorn very modern functionality into this old browser. They may well work, but don't try to do anything too clever with your canvas or SVG, or you'll kill the browser.
Finally, since you mentioned that you're using all this to draw graphs, I will point out the graphing module of the Raphael library. Raphael is a library which draws SVG graphics on all browsers (falling back to VML for IE). The graphing module provides all the usual graph types, wrapped in an extremely easy-to-use javascript API. And it is fully cross-browser compatible -- it works on all desktop browsers out of the box from the latest Chrome and Firefox all the way back to IE6. If you're struggling with cross-browser compatibility with the tools you're using now, you may want to switch to this library.
Hope that helps.

I have recently created an application in which I had to use toDataURL() but I was not able to find any way to do this in IE7/8. My application was an online image editor in which user was able to save the canvas contents. I believe there is not way we can use this method in IE7/8.

Can an image be rotated by JavaScript without canvas or AJAX?

I've seen a few JavaScript image rotators that use either the HTML5 canvas element or an AJAX call to a server-side script, but is it possible to do it without using those methods? Internet Explorer doesn't support canvas (I'm aware of excanvas, but I'd like to do without if possible) and I'm not sure if AJAX will be fluid enough. If there is a way, are there any open source scripts, examples, or resources that you could point me to?

Alas, CSS does not support rotating images in any way, shape or form (unless you count CSS Transforms, which are only supported by Safari 4 and Firefox 3.1).
Your best bet is to use Raphael's image() and rotate(), which should support all semi-modern browsers (using SVG) and most versions of IE (using VML).

This jQuery plugin works in major browsers including IE: http://wilq32.googlepages.com/wilq32.rollimage222 . It makes use of excanvas, but at least it allows you to evaluate if that method is good enough for your purposes.

Yes, via CSS Transform:
var degree=180;
document.getElementById('image_name').style.transform='rotate('+degree+'deg)';

Google is your friend:
http://www.walterzorn.com/rotate_img/rotate_img.htm
But the downside of this technique (as mentioned) is that it uses hacks by inserting a huge number of DIVS so it could slow down the browser a good bit. Use with caution. Problems like this are why the canvas tag was created in the first place.