davidgky
asked on
Text Direction with CSS?
Instead of the text in a <td> going left to right, I want the text to go vertical, botton to top. Is this possible? I can't find it anywhere.
Any help is appreciated.
Thanks,
davidgky
Any help is appreciated.
Thanks,
davidgky
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I am afraid so. It is part of the move toward international language support. The ability to do vertical is just a side effct of support for Japanese and Chinese.
Cd&
Cd&
Microsoft has a new filter style that can resize, rotate, or reverse the content of the object by using matrix transformations. It is called the Matrix Filter.
Put the text you want displayed vertically in a div and apply the matrix filter to it and set it for 90 degrees and that will rotate everything, text, images, etc, in the div 90 degrees.
Pretty cool what you could do with this thing. It takes a little work but the example is easy to modify to suit your needs.
Example:
http://msdn.microsoft.com/workshop/samples/author/dhtml/filters/matrix.htm
Reference:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/Matrix.asp
It is a 5.5 IE only style.
Chris
Put the text you want displayed vertically in a div and apply the matrix filter to it and set it for 90 degrees and that will rotate everything, text, images, etc, in the div 90 degrees.
Pretty cool what you could do with this thing. It takes a little work but the example is easy to modify to suit your needs.
Example:
http://msdn.microsoft.com/workshop/samples/author/dhtml/filters/matrix.htm
Reference:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/Matrix.asp
It is a 5.5 IE only style.
Chris
Just for fun, and expanding on COBOLdinosaur's first comment... here are some functions (javascript, not css solution) that write text top-to-bottom, bottom-to-top, and right-to-left.
Getting the vertical text to appear to wrap at the appropriate points would be quite an additional feat, but these should be fine for short strings.
----------
<html>
<head>
<title>none really</title>
<script type="text/javascript">
<!--
function writeToptoBottom( preText ) {
var postText = "";
var splitText = preText.split( "" );
for( var i = 0; i < preText.length; i ++ ) {
postText += splitText[i] + "<br>";
}
return postText;
}
function writeBottomtoTop( preText ) {
var postText = "";
var splitText = preText.split( "" );
for( var i = preText.length - 1; i >= 0; i -- ) {
postText += splitText[i] + "<br>";
}
return postText;
}
function writeRighttoLeft( preText ) {
// ofcourse <bdo dir="rtl"> would handle this one
var postText = "";
var splitText = preText.split( "" );
for( var i = preText.length - 1; i >= 0; i -- ) {
postText += splitText[i];
}
return postText;
}
// -->
</script>
</head>
<body>
<table cellpadding="10" cellspacing="0" border="0">
<tr>
<td>
<script type="text/javascript">
<!--
document.write( writeToptoBottom( "Hello there everybody!" ) );
// -->
</script>
</td>
<td>
<script type="text/javascript">
<!--
document.write( writeBottomtoTop( "Hello there everybody!" ) );
// -->
</script>
</td>
<td>
<script type="text/javascript">
<!--
document.write( writeRighttoLeft( "Hello there everybody!" ) );
// -->
</script>
</td>
</tr>
</table>
</body>
</html>
----------
-corey
Getting the vertical text to appear to wrap at the appropriate points would be quite an additional feat, but these should be fine for short strings.
----------
<html>
<head>
<title>none really</title>
<script type="text/javascript">
<!--
function writeToptoBottom( preText ) {
var postText = "";
var splitText = preText.split( "" );
for( var i = 0; i < preText.length; i ++ ) {
postText += splitText[i] + "<br>";
}
return postText;
}
function writeBottomtoTop( preText ) {
var postText = "";
var splitText = preText.split( "" );
for( var i = preText.length - 1; i >= 0; i -- ) {
postText += splitText[i] + "<br>";
}
return postText;
}
function writeRighttoLeft( preText ) {
// ofcourse <bdo dir="rtl"> would handle this one
var postText = "";
var splitText = preText.split( "" );
for( var i = preText.length - 1; i >= 0; i -- ) {
postText += splitText[i];
}
return postText;
}
// -->
</script>
</head>
<body>
<table cellpadding="10" cellspacing="0" border="0">
<tr>
<td>
<script type="text/javascript">
<!--
document.write( writeToptoBottom( "Hello there everybody!" ) );
// -->
</script>
</td>
<td>
<script type="text/javascript">
<!--
document.write( writeBottomtoTop( "Hello there everybody!" ) );
// -->
</script>
</td>
<td>
<script type="text/javascript">
<!--
document.write( writeRighttoLeft( "Hello there everybody!" ) );
// -->
</script>
</td>
</tr>
</table>
</body>
</html>
----------
-corey
To display text vertically, use the LABEL object
Example:
<Html>
<head><title>Vertical text</title></head>
<body>
<OBJECT
CLASSID="clsid:99B42120-6E
ID=lbl1
WIDTH=40
HEIGHT=250
>
<PARAM NAME="angle" VALUE="90">
<PARAM NAME="alignment" VALUE="2">
<PARAM NAME="BackStyle" VALUE="0">
<PARAM NAME="caption" VALUE="Hello there">
<PARAM NAME="FontName" VALUE="Arial">
<PARAM NAME="FontSize" VALUE="30">
<PARAM NAME="FontBold" VALUE="1">
<PARAM NAME="frcolor" VALUE="8388608">
</OBJECT>
</body>
</html>
Since I noted that you use MSIE, you'll be just fine. NS doesn't display the label, however
Maybe NS6 does?
Control textdirection with the angle property. You can have it left to right, right to left, top to bottom, bottom to top... any angle is possible
Ramses says RooOOAar!
Example:
<Html>
<head><title>Vertical text</title></head>
<body>
<OBJECT
CLASSID="clsid:99B42120-6E
ID=lbl1
WIDTH=40
HEIGHT=250
>
<PARAM NAME="angle" VALUE="90">
<PARAM NAME="alignment" VALUE="2">
<PARAM NAME="BackStyle" VALUE="0">
<PARAM NAME="caption" VALUE="Hello there">
<PARAM NAME="FontName" VALUE="Arial">
<PARAM NAME="FontSize" VALUE="30">
<PARAM NAME="FontBold" VALUE="1">
<PARAM NAME="frcolor" VALUE="8388608">
</OBJECT>
</body>
</html>
Since I noted that you use MSIE, you'll be just fine. NS doesn't display the label, however
Maybe NS6 does?
Control textdirection with the angle property. You can have it left to right, right to left, top to bottom, bottom to top... any angle is possible
Ramses says RooOOAar!
It is time to clean this abandoned question up.
I am putting it on a clean up list for CS.
<recommendation>
points to COBOLdinosaur
</recommendation>
If anyone participating in the Q disagrees with the recommendation,
please leave a comment for the mods.
Cd&
I am putting it on a clean up list for CS.
<recommendation>
points to COBOLdinosaur
</recommendation>
If anyone participating in the Q disagrees with the recommendation,
please leave a comment for the mods.
Cd&
ASKER
Thanks again,
davidgky