CODEWITHSUNDEEP
htmlcssvertical-text
Learning
Learning

Reputation: 20011

Write Text Vertically at 270deg using CSS

I am working on an example where i want to write text vertically at 90 deg and 270deg.

Example at JSFiddlle

It seems to be working in FF but doesn't show up in IE at all.

I tried to change certain properties with no luck.

I would appreciate if someone can help me resolve this so that it works across all browsers.

Regards

Upvotes: 0

Views: 3712

Answers (4)

Learning
Learning

Reputation: 20011

I think the way i have done along with Jquery is much better and help to get around the browser issue as i faced in other example

Check out http://jsfiddle.net/RwEme/1865/

I think this is best suited for my example & works well in IE without any issue with font also. I am write text in div and rotating it with jQuery plug in.

Has issues with IE 8 & below

Upvotes: 0

jfrej
jfrej

Reputation: 4648

It's very strange but when I remove Helvetica from your CSS it all seems to work fine. Are you sure the text displays when you remove the rotation?

Also, the height: -150px might be causing a problem. Try using margins instead.

You might want to add

-ms-transform: rotate(270deg);

for modern IE.

The demo from this article works fine in IE9 for me: css-tricks.com/sideways-headers

This one is good too: css-tricks.com/snippets/css/text-rotation

Upvotes: 1

Simon McLoughlin
Simon McLoughlin

Reputation: 8465

because its using webkit, moz and o css3 properties to rotate it. IE supports none of these css attributes

Upvotes: 1

Billy Moat
Billy Moat

Reputation: 21050

IE doesn't support this along with most other CSS3 functions.

Although you could try this guys solution:

http://scottgale.com/blog/css-vertical-text/2010/03/01/

Upvotes: 1

Related Questions