How to set vertical text from bottom to top in html?

Question

It is easy to set text from top to bottom and there are enough resources to do that.

The problem is with bottom to top vertical alignment.

See the image below-

enter image description here

@putvande I didn't figured out the way to set the bottom to top vertical alignment. — sjain, Nov 19 '13 at 13:07
http://stackoverflow.com/questions/1080792/how-to-draw-vertical-text-with-css-cross-browser ? — gvee, Nov 19 '13 at 13:10
These are dynamically generated texts. So I considered putting each text in a `` tags in a table. — sjain, Nov 19 '13 at 13:11

score 2 · Answer 1 · edited Nov 19 '13 at 13:10

2

You might want to try this.

.rotate {

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

edited Nov 19 '13 at 13:10

Trufa

39,971
43
126
190

answered Nov 19 '13 at 13:09

gwinyai

2,560
2
15
17

score 1 · Answer 2 · answered Nov 19 '13 at 13:07

1

This should work:

<head>
<style>
div
{
  width:130px;
  height:50px;
  -ms-transform:rotate(270deg); /* IE 9 */
  -moz-transform:rotate(270deg); /* Firefox */
  -webkit-transform:rotate(270deg); /* Safari and Chrome */
  -o-transform:rotate(270deg); /* Opera */
}
</style>
</head>
<body>
<br><br><br>
<div><h3>Vertical Text</h3></div>
</body>

answered Nov 19 '13 at 13:07

Ranveer

6,683
8
45
92

These are dynamically generated texts. So I considered putting each text in a tags in a table. Any idea ? – sjain Nov 19 '13 at 13:12
Instead of `div{...}` define a class. Name it anything like `rotate{...}` and then use `
Your Text
` and you should be good to go! – Ranveer Nov 19 '13 at 13:25
Is it necessary to create a class. Can't I simply do: `
– sjain Nov 19 '13 at 13:29
It obviously isn't necessary to create a class! Classes are so that you won't need to repeat those lines of code again and again and your code looks cleaner. But yeah! It would work either way. – Ranveer Nov 19 '13 at 13:31
No, it didn't worked. My `itextpdf` in android which converts html to pdf is still displaying it horizontal. – sjain Nov 20 '13 at 06:49
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/41520/discussion-between-ranveer-and-ved-prakash) – Ranveer Nov 20 '13 at 10:18

score 0 · Answer 3 · edited Dec 24 '20 at 08:35

0

div {  
    top:90px;   
    position:relative;  
    width:50px;   
    white-space:nowrap; 
    -ms-transform:rotate(270deg);   
    -moz-transform:rotate(270deg);   
    -webkit-transform:rotate(270deg);  
    -o-transform:rotate(270deg);   
}

Worked well for me.

edited Dec 24 '20 at 08:35

SilverNak

3,283
4
28
44

answered Dec 24 '20 at 05:03

pulock

1

How to set vertical text from bottom to top in html?

3 Answers3