I have a table that I need to render some vertical text in one of the columns.
My understanding is that the following style should achieve the effect across browsers:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
This is OK in IE9 and Firefox, however this does not seem to work in IE7 or IE8... See:
http://jsfiddle.net/wzUfj/
Can anybody suggest a way to achieve this?
Thanks
In order to Rotate in those older browsers, you'll have to use Microsoft's proprietary filters:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=VALUE);
Replace Value with an integer, 0-4.
0 = 0 degrees
1 = 90 degrees
2 = 180 degrees
3 = 270 degrees
4 = 360 degrees
I do not believe you can do anything other than 90 degree increments, and I believe you may only have one filter per CSS rule. Also, this is of course non-standard and won't validate, if that's an issue.
CSS3 transforms - not supported on IE 7 and 8.
See: http://caniuse.com/#feat=transforms2d
IE8 and below do not support transforms.
According to this tutorial you can use writing-mode instead
As an extra gotcha, notice in IE9 the rotation can only be applied to block elements (such as paragraph and not span).
Here is a a fiddle
Related
Does somebody know how to draw vertical text in opera 9.5? As I can see in "caniuse", opera 9.5 doesn't support svg, -o-transform: rotate(-90deg), writing-mode:tb-rl and I don't know any methods to do this. Help me please.
This doesn't work with older browsers like IE
transform : scale(1,1.3); -moz-transform: scale(1,1.3); -o-transform: scale(1,1.3); -webkit-transform: scale(1,1.3);
Any workaround to make it work with older versions ?
This doesn't work with older browsers like IE
This is wrong. It depends on which version of IE you are suporting.
There is the -ms- prefix for IE9. IE 10+ can perfectly run css3 2D transform nativelly, using transform property.
//IE 9
-ms-transform: scale(1, 1.3);
//IE 10+
transform: scale(1, 1.3);
So you can make almost all 2D tranforms into IE9+. Info via Can I Use
But, of course, if you need to suport lower versions, like IE8, you have some workarounds, like this one.
I would like to be able to use calc() with transform:translateX in my CSS.
E.g.,
#myDiv {
-webkit-transform: translateX(calc(100% - 50px));
-moz-transform: translateX(calc(100% - 50px));
transform: translateX(calc(100% - 50px));
}
While this works perfectly in Chrome, Safari, and Firefox - it does not work in IE10 or IE11.
You can see a simple example here: http://jsfiddle.net/SL2mk/9/
Is this impossible? Is it a bug in IE, or is calc() not supposed to work in this context?
For what it's worth - I read here that you can "stack" translateX to acheive the same effect, and my testing seems to confirm this. I.e.,
#div {
transform: translateX(calc(100% - 50px));
}
is the same as:
#div {
transform: translateX(100%) translateX(-50px);
}
But I don't know if this is the best, most reliable, and future-proof way to do this.
I also know that it's possible to use left instead of translateX, but the latter is much smoother when used with transitions, since, as I understand it, it forces the use of the GPU to handle the animation.
This:
transform: translateX(100%) translateX(-50px);
gets compiled at parse time, but calc expression here :
transform: translateX(calc(100% - 50px));
has to be interpreted each time when browser needs that value. Result of the expression can be cached but I wouldn't rely on browsers to use such kind of optimizations.
So first one is better in the sense that a) it works now, b) is effective and c) it will work in future until the spec will be in effect.
I just use them both with -ms- browser selector. It works perfectly.
-ms-transform: translateX(100%) translateX(-50px); /* IE 11 */
transform: translateX(calc(100% - 50px));
I would like to know whether it is possible or not to create text in a web page at an angle, for example at 40 Degrees. If it is possible, how can I do this?
EDIT: Finally, I decided to go with Mathias Bynens's answer.
Use CSS3 transforms:
.selector {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
IE does support filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);, where the rotation property accepts one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively. It’s a filter though, so I wouldn’t recommended using it.
To add to Mathias' answer, you can rotate text in IE, too: http://snook.ca/archives/html_and_css/css-text-rotation
However, you are bound to multiples of 90°.
Apart from that you could utilize SVG/VML for rotated text. Look, for example, at this page: http://raphaeljs.com/text-rotation.html
It uses the RaphaelJS library for cross browser text rotation without images.
Mathias is right in his answer, but to also support IE you can use their filter:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/*play with the number to get it right*/
Then IE will be supported too :)
I'm trying to implement a gauge widget for a website. The spec says only HTML/CSS is allowed, so I can't use JavaScript (don't ask me why -- maybe if there's a really simple way of doing it with JavaScript I could persuade the project lead).
So far I have a div with a background image that shows the back of the gauge. Inside this div is an img that is rotated, depending on the gauge value. This value is dynamically injected into the HTML using PHP.
The gauge works fine in Safari/FireFox, but breaks in IE. If I add a border to the image I can see why -- it appears that the IE rotation also includes an automatic translation so that the needle is off-center (see screenshot below).
So, here's the question: how do I shift the needle back to the center of the gauge in IE?
<div style="background: url('genies/gauge.png'); background-repeat: no-repeat; height: 235px; overflow: hidden;">
<img src="genies/gauge-needle.png"
style="-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678118655, M12=-0.70710678118655,M21=0.70710678118655, M22=0.70710678118655, sizingMethod='auto expand'); zoom: 1;" />
</div>
The problem here is that the image is rotating about a point that you don't expect it to.
You need to set the transform origin to the centre of your image.
For instance, you would use -moz-transform-origin, -webkit-transform-origin, -o-transform-origin, -ms-transform-origin, -etc-transform-origin...
Check out this page for information on how to deal with the Matrix filter in MSIE:
https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie
This is going to be difficult to solve without javascript, if your gauge only moves by a couple of increments (say, 15, 30, 45... deg), you could use this tool:
http://www.useragentman.com/IETransformsTranslator/
and manually pass the margin-left and margin-top values to IE.
Otherwise I'd recommend javascript with CSSSandPaper by the same author. http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/.
I found a solution without JS, for IE - see here