Vertical Text Direction

Question

I have been trying text to go in a vertical direction like we can do in ms-word tables but so far I have only been able to do THIS... which I am not happy with because it's a box rotated... Isn't there a way to have actual vertical direction text?

I only set the rotation to 305 degrees in the demo which doesn't make the text vertical. 270deg will but I only made the demo to show rotation.

Answer 1

h1{word-break:break-all;display:block;width:40px;} 

H E L L O

NOTE: Browser Supported - IE browser (8,9,10,11) - Firefox browser (38,39,40,41,42,43,44) - Chrome browser (44,45,46,47,48) - Safari browser (8,9) - Opera browser (Not Supported) - Android browser (44)

Answer 2

For vertical text with characters one below another in firefox use:

text-orientation: upright;
writing-mode: vertical-rl;

Answer 3

I'm new at this, it helped me a lot. Just change width, height, top and left to make it fit:

.vertical-text {
display: block;
position:absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
transform: rotate(90deg);
}

You can also go here and see another way to do it. The author does it like this:

.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}

Answer 4

You can use word-wrap:break-word to get vertical text use following snippete

HTML:

<div class='verticalText mydiv'>Here is your text</div>

css:

.verticalText {
word-wrap: break-word;
  font-size: 18px;
}
.mydiv {
  height: 300px;
  width: 10px;
}

Answer 5

Try using:

writing-mode: lr-tb;

Answer 6

Can use CSS3 Transform property

.txtdiv{
  transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
  -webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
}