How do you do vertical text in Firefox? - css

I want it to start from the bottom and go up

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
I can't remember if the CSS supports radians, but that may work as well. Of course, defining pi might be an issue!

HTML
<div class="rotate">
Text
</div>
CSS
.rotate{-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);}

For firefox
.verticaltext {
writing-mode: tb-rl;
filter: flipV flipH;
}

Related

Rotate, Flip and Resize icons in Kendo UI Mobile

Is it possible to rotate (90-180-270 degrees), flip (horizontal/vertical) and resize (2x, 3x) icons easily in kendo-ui mobile?
You can do rotate easily with CSS transforms, something like this:
<style>
.km-home:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
You can flip an element with CSS transforms too:
<style>
.km-home:after {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
</style>
You can also use scale to resize it - scale(2), etc...
However this question has nothing to do with Kendo UI :)
Here is an example implementation of previous and next buttons using a custom kendo mobile icon based on Bundyo's insights:
<a data-role="button" class="prev" data-icon="custom"></a>
<a data-role="button" class="next" data-icon="custom"></a>
CSS:
.km-button.prev .km-icon.km-custom:before, .km-button.prev .km-icon.km-custom:after,
.km-button.next .km-icon.km-custom:before, .km-button.next .km-icon.km-custom:after { content: "\e217" }
.km-button.prev .km-icon.km-custom:before, .km-button.prev .km-icon.km-custom:after { -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); }

CSS 2D transform with SVG background-image in Internet Explorer 9

I've created a left and right navigation button using only a single SVG background image and flipping it horizontally to get the other direction. This works fine in all browsers which support CSS 2D transforms except Internet Explorer 9. Basically the CSS looks like this:
div.nav-left, div.nav-right {
background-image: url('TriangleArrow-Right.svg');
}
div.nav-left {
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
I've created a jsFiddle which correctly looks like this in Internet Explorer 10, Firefox, Chrome, Safari etc.:
But actually looks like this in IE9:
I've included a greater-than sign to illustrate in which direction the buttons should point. And actually you can see, that IE9 applies the transform correctly to the text, but does the total opposite for the SVG background image.
If I change the SVG background image to a PNG, everything works correctly in IE9 however, see this jsFiddle.
I was unable to find any information on this. It seems to be a bug, as IE9 should support CSS transforms and SVGs as CSS background correctly.
I think you need to use the special syntax for IE:
div.nav-left {
-webkit-transform: scaleX(-1);
/*-ms-transform: scaleX(-1);*/
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
transform: scaleX(-1);
left: -50px;
}
http://jsfiddle.net/g2y86/1/
It doesn't look very sharp though, maybe there's a better way.
Edit
For flipping, try with this (note that both -ms-filter and filter lines are for IE) :
div.nav-left {
-webkit-transform: scaleX(-1);
-ms-filter: fliph;
filter: fliph;
transform: scaleX(-1);
left: -50px;
}
http://jsfiddle.net/2cPYR/
From what I tried the scaleX-property indeed won't work with negative numbers on an svg background image. If you apply differnt colored borders to the div your are trying to transform you can see, that it actually gets transformed correctly, but the background image is not adapting to its container.
If you just want to solve your immediate problem, you can use -ms-transform: rotate(180deg);, the svg seems to know what it is supposed to do here.
I used filter: FlipV; to accommodate ie9
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
filter: FlipV; // flip for ie9

Browser compatibility in vertical text

I want to below vertical text
I use:
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
but it does not not work in IE 5 nor 6.
Another code I use:
writing-mode: tb-rl;
filter: flipv fliph;
But it does not work in Firefox
How can I resolve this problem?
Plenty of solutions here in an alternative thread : How can I draw vertical text with CSS cross-browser?

Transform Properies in CSS

I want to rotate an image when i hover on it.I use the follwing code to rotate.Bui it doesn't works....
#header #scn:hover{transform:rotate(45deg)};
It doesn't works for me.I am using Firefox 4.
Is there any way to perform transform and shadow effects in IE8.
You need to add a prefix for every rendering engine. For Firefox the prefix is -moz-.
To rotate an image in all supported browsers use:
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
For text shadows in IE8 you can use Shadow Filter (MSDN).
Plus there is CSS transforms workaround for Internet Explorer:
cssSandpaper.

Display text vertically (rotated 90 degrees) in IE and Firefox

I have a page that houses an asp GridView and I would like to display the text vertically to allow it to print better. Currently I'm using css to do that:
.rotate { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); width: 25px; }
Which works in FF except the 25px width is ignored and in IE the width is being set correctly but the text isn't vertical. Anyone know how to make this work in both browsers?
Here's a -90 degree rotation using CSS that should work in IE:
.box_rotate {
-moz-transform: rotate(-90deg); /* FF3.5+ */
-o-transform: rotate(-90deg); /* Opera 10.5 */
-webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */
zoom: 1;
}
For your reference http://css3please.com/ is a good tool for generating these kind of CSS effect with pretty good cross browser support.
I can't really say why the width isn't applying in FF without a concrete example, but you might try setting display:block;

Resources