244

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?

Improve this question
7
  • 4
    There 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. Commented Jul 3, 2009 at 21:13
  • 1
    Vertical 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. Commented 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! Commented Nov 10, 2010 at 6:22
  • Here is a breakdown of the technique I used: scottgale.com/blog/css-vertical-text/2010/03/01 Commented 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 Commented Dec 7, 2011 at 2:39

9 Answers 9

Reset to default
214

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... */ }
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

+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;
Microsoft "filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);"
Unfortunately, IE9 (in standards mode!) applies both the -ms-transform-* styles, and the filter. In compatibility view, it only applies the filter.
Make sure your text is a block element ie use display:inline-block or similar
Here'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
|
73

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); }
Improve this answer

2 Comments

Works on Chrome 5. Doesn't work on IE 8 "quirks" mode; does work on "IE8 Standards mode".
Thanks for letting me know. Please post it here, if you find a way to have vertical Text in IE under quirks mode.
16

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

Improve this answer

1 Comment

great solution, much better than the previous ones - no problems with text positioning after rotate
8

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>

Improve this answer

1 Comment

sideways-rl as of now is not supported widely, I would recommend vertical-rl and rotating to 180 deg
6

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]-->
Improve this answer

Comments

5

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.

Improve this answer

3 Comments

Loving the differentiation between IE6+ and all modern browsers - it reads as if you're saying any version of IE is not modern :)
@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.
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.
5

If you use Bootstrap 3, you can use one of it's mixins:

.rotate(degrees);

Example:

.rotate(-90deg);
Improve this answer

1 Comment

Still 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.
5

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

Improve this answer

Comments

4

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*/ }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.