Printing webpage with rotated text in Internet Explorer 9

Question

OK, so I completely changed this question, lets cut the crap. Try this link: Printing rotated text crossbrowser (It contains exactly the source code as given below)

You will see red blablabla text with a blue border rotated 90 degrees ccw.

Now my problem for any IE9 user, go to my website or use this code below. As you can see in the print preview: context menu -> "Print preview...", the rotation fails! (And ofcourse the background colors get lost, but this is normal)

And I KNOW it is possible to print, for example 35 degrees, rotated text, I got an example of it, but it contains a lot of crap css code, so I have not really been able to figure out what is different in that example.

Can anyone see what obvious thing I am missing here?

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.testRotation
{
  width: 200px;
  height: 16px;
  background-color: red;
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand');
  -moz-transform:rotate(270deg) translate(-200px,0px);
  -moz-transform-origin: 0% 0%;
  -webkit-transform: rotate(270deg) translate(-200px,0px);
  -webkit-transform-origin: 0% 0%;
  -o-transform: rotate(270deg) translate(-200px,0px);
  -o-transform-origin: 0% 0%;
  transform: rotate(270deg) translate(-200px,0px);
  transform-origin: 0% 0%;
  zoom: 1;
  position: absolute;
  left: 20px;
  top: 100px;
  margin: 10px;
}
</style>
</head>

<body>
<div style="position: absolute; width: 16px; height: 200px;left: 25px; top: 105px; background-color: green; border-style: solid; border-width: 5px; border-color: blue;word-wrap: break-word;">
TARGET
</div>
<div class="testRotation">
BLABLABLABLABLA
</div>

</body>
</html>

I think you missed my question; It is about actually printing the webpage. Rotating the text is not the problem. When printing the webpage, it does not rotate. The print preview is different from what I see in the popup, perhaps I was not clear enough? — Yeti, Oct 23 '11 at 21:40

Yeti · Accepted Answer · 2011-10-25T18:45:05.450

OK, so I found the answer, and 'duri' was a bit right with his -ms-transform. But I did not see the point of using -ms-transform for a crossbrowser css to rotate text. And the very reason is this:

in IE9 it seems that you can just rotate text with either -ms-transform or filter: progid:DXImageTransform.Microsoft.Matrix(). BUT when you are about to print the webpage, as in context menu -> Print preview..., the css filter-attribute does not apply anymore and -ms-transform is used.

So to have a real css crossbrowser solution, that also prints rotated stuff, you MUST use as well (as in my example):

-ms-transform: rotate(270deg) translate(-200px,0px);;
-ms-transform-origin: 0% 0%;

EDIT: BEWARE! I now tried to apply -ms-transform, but again a new problem occurs... Because now I use the following script:

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand');
-ms-filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand');
-moz-transform:rotate(270deg) translate(-200px,31px);-moz-transform-origin: 0% 0%;
-webkit-transform: rotate(270deg) translate(-200px,31px);-webkit-transform-origin: 0% 0%;
-o-transform: rotate(270deg) translate(-200px,0px);-o-transform-origin: 0% 0%;
-ms-transform: rotate(270deg) translate(-200px,0px);-ms-transform-origin: 0% 0%;
transform: rotate(270deg) translate -200px,0px);transform-origin: 0% 0%;
zoom: 1;

This should rotate the element in all browsers.. Except for IE9. Because it will both recognize -ms-filter to rotate, and it will use filter to rotate.

So the only possible solution I can think of now is to put a hack on the filter, so that in IE9 it will not do the filter thing.. Is there any way at all to rotate an element in all IE browsers without having to use css hacks? Let me know, I haven't found any...

For example, check out css3please.com, it claims to have crossbrowser code for rotate. Well, it does not, change the values to 270 degrees and adapt the transformation matrix. And you will see in IE9, the text will be upside down (180 degrees), instead of 270 degrees rotated.

Printing webpage with rotated text in Internet Explorer 9

1 Answers1

Linked