Rotating text vertically

Forum Moderators: not2easy

Message Too Old, No Replies

Rotating text vertically

ahmed24

12:00 pm on Jul 27, 2013 (gmt 0)

I have the following CSS that rotates text vertically. I call this class within a td, but the problem i face is that the td width increases along with the length of text, instead i want the td height to be increasing because it will be going vertically.

Any suggestions on how this can be resolved?

Thanks

-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);

JD_Toims

5:43 pm on Jul 27, 2013 (gmt 0)

Have you tried rotating the <td> itself rather than the text it contains? (I haven't done this in a while, but if I remember correctly that's what I had to do to get it to work in a similar situation.)

birdbrain

1:00 pm on Jul 28, 2013 (gmt 0)

Hi there ahmed24,

try this example, which has been tested in IE10,
Firefox 22.0, Opera 12.16 and Chrome 28.0.....


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>CSS rotation test</title>

<style>
body {
   background-color:rgb(241,241,241); 
  }
#text {
   position:relative;
   width:50px;
   height:170px;
   border:1px solid rgba(0,0,0,0.5);
   border-radius:7px;
   margin:20px auto;
   background-color:rgb(255,255,255);
   box-shadow:inset 0 0 10px rgba(0,0,0,0.6),
                    0 0 10px rgba(0,0,0,0.6);
  }
#text span {
   position:absolute;
   width:170px;
   line-height:50px;
   left:0;
   top:100%;
   transform:rotate(-90deg); 
   -webkit-transform:rotate(-90deg); 
   transform-origin:0 0;
   -webkit-transform-origin:0 0;
   text-align:center;
   color:rgb(48,48,48);
  }
</style>

</head>
<body>

<div id="text">
  <span>Lorem ipsum</span>
</div>

</body>
</html>

birdbrain