StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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:</p> <p>in IE9 it seems that you can just rotate text with either <code>-ms-transform</code> or <code>filter: progid:DXImageTransform.Microsoft.Matrix()</code>. BUT when you are about to print the webpage, as in <code>context menu -> Print preview...</code>, the css filter-attribute does not apply anymore and -ms-transform is used.</p> <p>So to have a real css crossbrowser solution, that also prints rotated stuff, you MUST use as well (as in my example):</p> <pre><code>-ms-transform: rotate(270deg) translate(-200px,0px);; -ms-transform-origin: 0% 0%; </code></pre> <p>EDIT: BEWARE! I now tried to apply -ms-transform, but again a new problem occurs... Because now I use the following script:</p> <pre><code>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; </code></pre> <p>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.</p> <p>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...</p> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload