homepage Welcome to WebmasterWorld Guest from 54.198.130.203
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Rotating text vertically
ahmed24




msg:4597003
 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




msg:4597044
 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




msg:4597168
 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved