Solved

Text Direction with CSS?

Posted on 2001-07-03
7
1,274 Views
Last Modified: 2013-11-19
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
0
Comment
Question by:davidgky
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 50 total points
ID: 6249614
For IE5.5 only there is this on the Microsoft site:

http://msdn.microsoft.com/library/default.asp?URL=/library/en-us/dnie55/html/verticaltext.asp 

I have not tried it so I don't know if it works.

For everything else you either create a graphic or do this

H<br>e<br>l<br>l<br>o

to get

H
e
l
l
o

Cd&
0
 

Author Comment

by:davidgky
ID: 6249834
Thanks... I found that this morning, but our intranets users are setup using only IE 5.0.  I guess I'm stuck using images until we upgrade!

Thanks again,

davidgky
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6249948
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&
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Expert Comment

by:CJCraft
ID: 6252187
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
0
 
LVL 1

Expert Comment

by:coreyti
ID: 6325646
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
0
 
LVL 2

Expert Comment

by:ramses
ID: 6423234
To display text vertically, use the LABEL object

Example:

<Html>
<head><title>Vertical text</title></head>
<body>
<OBJECT
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
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!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6616504
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&
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Bootstrap 3 - Style a dropdown 1 31
Passing client data from form to server 5 52
Word Press Fixes to Google Speed Test Issues 2 47
css messed up 8 23
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question