I want to rotate a single word of text by 90 degrees, with cross-browser (>= IE6, >= Firefox 2, any version of Chrome, Safari, or Opera) support. How can this be done?
-
4There is no pure CSS you can use with cross compatibility. What I've got is all there is. You're better off with an image.– Robert KCommented Jul 3, 2009 at 21:13
-
1Vertical text crossbrowser is not so difficult. On the dns4.nl there is a solution that works even in opera. I tested it with all versions ie, mozilla and safari (also crown). the link is: dns4.nl/pagina/html_code/vertikale_tekst.html. comment for xkcd150: > Problem is, that's relying on the canvas element. – xkcd150 Sep 20 at 10:13 No, the procedure isn't relying on the canvas element.– user161269Commented Aug 22, 2009 at 12:29
-
Here's a tutorial that explain how to do all kind of text transformations even in IE (including the solution to your problem) :) useragentman.com/blog/2010/03/09/… Hope it helps!– Juanma GuerreroCommented Nov 10, 2010 at 6:22
-
Here is a breakdown of the technique I used: scottgale.com/blog/css-vertical-text/2010/03/01– user531710Commented Dec 6, 2010 at 3:40
-
I could rotate successfully following the instructions giving on this page but i couldn't print the page. The text get printed backwards. This website was very useful to me: sevenwires.com/play/UpsideDownLetters.html– NahuelCommented Dec 7, 2011 at 2:39
9 Answers
Updated this answer with recent information (from CSS Tricks). Kudos to Matt and Douglas for pointing out the filter implementation.
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
/* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* Should be unset in IE9+ I think. */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Old answer:
For FF 3.5 or Safari/Webkit 3.1, check out: -moz-transform (and -webkit-transform). IE has a Matrix filter(v5.5+), but I'm not certain how to use it. Opera has no transformation capabilities yet.
.rot-neg-90 {
/* rotate -90 deg, not sure if a negative number is supported so I used 270 */
-moz-transform: rotate(270deg);
-moz-transform-origin: 50% 50%;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: 50% 50%;
/* IE support too convoluted for the time I've got on my hands... */
}
-
1+1 for the ghost bear icon ;) I had a good deal of trouble making this work, I ended up having to change my DOM structure and fudging with a negative margin. An IE version that's simpler to use but doesn't look right when the page is printed out: writing-mode: tb-rl; filter: flipv fliph; Commented Jun 30, 2010 at 6:39
-
12Microsoft "filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);"– MattCommented Jan 10, 2011 at 23:07
-
1Unfortunately, IE9 (in standards mode!) applies both the -ms-transform-* styles, and the filter. In compatibility view, it only applies the filter.– RomløkCommented Jan 9, 2013 at 12:44
-
3Make sure your text is a block element ie use display:inline-block or similar Commented Apr 22, 2013 at 12:37
-
2Here's some filters for IE8 and IE9 goodness. The first is IE8, second is IE8 standards mode, and #3 removes the filter for IE9+. Arrrgh, I can't get stackoverflow comments to stop filtering out my CSS hacks, so look at jsfiddle.net/GrPyj/9 Commented Oct 10, 2013 at 18:54
I am using the following code to write vertical text in a page. Firefox 3.5+, webkit, opera 10.5+ and IE
.rot-neg-90 {
-moz-transform:rotate(-270deg);
-moz-transform-origin: bottom left;
-webkit-transform: rotate(-270deg);
-webkit-transform-origin: bottom left;
-o-transform: rotate(-270deg);
-o-transform-origin: bottom left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
-
Works on Chrome 5. Doesn't work on IE 8 "quirks" mode; does work on "IE8 Standards mode". Commented Sep 30, 2010 at 20:06
-
Thanks for letting me know. Please post it here, if you find a way to have vertical Text in IE under quirks mode.– ChoesangCommented Oct 1, 2010 at 9:33
Another solution is to use an SVG text node which is supported by most browsers.
<svg width="50" height="300">
<text x="28" y="150" transform="rotate(-90, 28, 150)" style="text-anchor:middle; font-size:14px">This text is vertical</text>
</svg>
Demo: https://jsfiddle.net/bkymb5kr/
More on SVG text: http://tutorials.jenkov.com/svg/text-element.html
-
great solution, much better than the previous ones - no problems with text positioning after rotate– PicardCommented Dec 6, 2015 at 18:50
The CSS Writing Modes module introduces orthogonal flows with vertical text.
Just use the writing-mode
property with the desired value.
span { margin: 20px; }
#vertical-lr { writing-mode: vertical-lr; }
#vertical-rl { writing-mode: vertical-rl; }
#sideways-lr { writing-mode: sideways-lr; }
#sideways-rl { writing-mode: sideways-rl; }
<span id="vertical-lr">
↑ (1) vertical-lr 至<br />
↑ (2) vertical-lr 至<br />
↑ (3) vertical-lr 至
</span>
<span id="vertical-rl">
↓ (1) vertical-rl 至<br />
↓ (2) vertical-rl 至<br />
↓ (3) vertical-rl 至
</span>
<span id="sideways-lr">
↓ (1) sideways-lr 至<br />
↓ (2) sideways-lr 至<br />
↓ (3) sideways-lr 至
</span>
<span id="sideways-rl">
↓ (1) sideways-rl 至<br />
↓ (2) sideways-rl 至<br />
↓ (3) sideways-rl 至
</span>
-
7sideways-rl as of now is not supported widely, I would recommend vertical-rl and rotating to 180 deg Commented Sep 30, 2017 at 16:15
I adapted this from http://snook.ca/archives/html_and_css/css-text-rotation :
<style> .Rotate-90 { display: block; position: absolute; right: -5px; top: 15px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); } </style> <!--[if IE]> <style> .Rotate-90 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); right:-15px; top:5px; } </style> <![endif]-->
I've had problems trying to do it in pure CSS - depending on the font it can look a bit rubbish. As an alternative you can use SVG/VML to do it. There are libraries that help make it cross browser with ease e.g. Raphael and ExtJS. In ExtJS4 the code looks like this:
var drawComp = Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(), //or whatever..
height: 100, width: 100 //ditto..
});
var text = Ext.create('Ext.draw.Component', {
type: "text",
text: "The text to draw",
rotate: {
x: 0, y: 0, degrees: 270
},
x: -50, y: 10 //or whatever to fit (you could calculate these)..
});
text.show(true);
This will work in IE6+ and all modern browsers, however, unfortunately I think you need at least FF3.0.
-
1Loving the differentiation between IE6+ and all modern browsers - it reads as if you're saying any version of IE is not modern :) Commented Sep 19, 2012 at 19:13
-
1@ClarkeyBoy I would say only IE10 is almost up to speed with other browsers, and only because forced gpu rendering and grid layout. You can't really cal IE a modern browser, because it updates x3-x10 times slower then every other browser.– skmasqCommented Feb 1, 2013 at 23:57
-
Best bet is to use an SVG file or this JS, as you may find that using the CSS transform property may not be compatible with your responsively designed pages.– b01Commented Apr 26, 2016 at 17:07
If you use Bootstrap 3, you can use one of it's mixins:
.rotate(degrees);
Example:
.rotate(-90deg);
-
1Still works, but notice that: All vendor mixins are deprecated as of v3.2.0 due to the introduction of Autoprefixer in our Gruntfile. They will be removed in v4.– yishaizCommented Dec 21, 2015 at 9:33
My solution that would work on Chrome, Firefox, IE9, IE10 (Change the degrees as per your requirement):
.rotate-text {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
filter: none; /*Mandatory for IE9 to show the vertical text correctly*/
}
If CSS writing-mode: sideways-lr
is what you prefer, and you happen to run into chromium/chrome based browser. You may try
{
writing-mode: vertical-rl;
transform: rotate(180deg);
}
so all modern browsers support it now.
reference: https://bugs.chromium.org/p/chromium/issues/detail?id=680331#c4