Solved

I would like a vertical font

Posted on 2002-04-26
14
253 Views
Last Modified: 2013-12-02
I want to create a table with 20 to 30 columns.  The entries are just "+"or "-" so each column can be thin and I can get the whole thing to fit in about 800 pixels.  But, in order to do that I have to write the headings like this:

h      h
e      e
a      a
d      d
i      i
n      n
g      g
A      B

Rather ugly isn't it?  So, I'd like to be able to use a vertical font and write "headingA and "headingB" but still
have thin columns.

I need a simple solution that will work on most browsers and e-mail programs as I will be sending this table in an e-mailed document.  

Thanks,
  Ken
0
Comment
Question by:klopter
  • 5
  • 2
  • 2
  • +5
14 Comments
 
LVL 19

Accepted Solution

by:
webwoman earned 150 total points
ID: 6972203
There is no 'simple solution'. There is no solution at all. There is no such thing as a 'vertical font'.

If you have a table with that many columns, I suggest you put it in Excel and e-mail the Excel file. Then you can set headings that run at an angle.
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6972209
You also might want to rethink how you're handling the data. It's very possible that this could be more useful broken up into smaller chunks, totals, or a text summary rather than individual +/- signs.
0
 
LVL 1

Expert Comment

by:jello
ID: 6972317
Using style sheets you could specify where you want each letter placed.  Adjusting the margin-top property will allow you to control the spacing between letters.  This is kind of a cumbersome workaround, and probably not what you had in mind, but it might do the trick in a pinch.  Also, keep in mind that NN4 doesn't really like negative top margins, and does not always behave predictably.

<head>
<style>
<!--
.TblHdr {
     font-family : Verdana, Arial, sans-serif;
      font-size : 10pt;
     margin-top: -22px;
     color : #800000;
     font-weight : bold;
     }
.char1 {
     font-family : Verdana, Arial, sans-serif;
      font-size : 10pt;
     color : #800000;
     font-weight : bold;
     }

-->
</style>
</head>

<body>
<table border="1" cellpadding="0">
  <tr>
     <td align="center" valign="bottom"><p class="char1">H</p>
       <p class="TblHdr">e</p>
         <p class="TblHdr">a</p>
       <p class="TblHdr">d</p>
       <p class="TblHdr">i</p>
       <p class="TblHdr">n</p>
       <p class="TblHdr">g</p>
       <p class="TblHdr">&nbsp;</p>
       <p class="TblHdr">A</p></td>
     <td align="center" valign="bottom"><p class="char1">N</p>
       <p class="TblHdr">a</p>
       <p class="TblHdr">m</p>
       <p class="TblHdr">e</p>
       <p class="TblHdr">s</p></td>
     <td align="center" valign="bottom"><p class="char1">A</p>
       <p class="TblHdr">d</p>
       <p class="TblHdr">d</p>
       <p class="TblHdr">r</p>
       <p class="TblHdr">e</p>
       <p class="TblHdr">s</p>
       <p class="TblHdr">s</p>
       <p class="TblHdr">e</p>
       <p class="TblHdr">s</p></td>
  </tr>
  <tr>
     <td>+</td>
     <td>-</td>
     <td>+</td>
  </tr>
</table>
</body>
</html>


HTH,
-Elliott

0
 
LVL 33

Expert Comment

by:knightEknight
ID: 6972353
<TABLE>
 <TR>
  <TH valign='top' width='10'>H e a d i n g 1</th>
  <TD valign='top'> This is some content</td>
 </tr>
 <TR>
 <TD>&nbsp;</td>
 </tr>
 <TR>
  <TH valign='top' width='10'>H e a d i n g 2</th>
  <TD valign='top'> This is some more content</td>
</table>
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 6972392
... the trick there is to set the width to 10 and put a space between each letter in your heading text so that it wraps after each letter.
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6972702
And make it impossible to read... 20-30 columns of that would make somebody go blind ;-)

Rethink it or let them scroll. I'd prefer scrolling and reading to going blind....
0
 
LVL 2

Expert Comment

by:coreyit
ID: 6972996
>>> And make it impossible to read

Difficult as we might find it, that IS what the request was for.

Another (obvious) solution:
H<br>E<br>A<br>D<br>I<br>N<br>G<br>1

-corey
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 51

Expert Comment

by:ahoffmann
ID: 6973012
<TABLE BORDER=1><TR><TD WIDTH=1>V e r t i c a l<TD></TR></TABLE>
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6973265
Well, actually, that WASN'T what they asked for. They KNOW how to do that...

>>Rather ugly isn't it?  So, I'd like to be able to use a vertical font and write "headingA and "headingB"
but still have thin columns.

There is no such thing. And no way to get it. I stand by my answer -- either rethink what you're doing or send it as Excel, where you CAN create headers that run at a 90 degree angle.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6973649
Do the heading as a graphic then:

<table>
<tr><td colspan="20"><img src=headings.gif" border="0">
</td></tr>
<tr>

...
etc
...

Cd&
0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 6973759
webwoman,
< Well, actually, that WASN'T what they asked for. They KNOW how to do that...
  >>Rather ugly isn't it? ..
>

As I understand the questioner's "rather ugly",(s)he meant that each character has to be written separately, like in jello's suggestion.

Well, my suggestion actually does what was asked for (simple, and for any browser), it didn't exactly what was asked for: vertical font.
It gives a working solution, or name it workaround, and not the advice to think about the design (where we can have different opinions, but lets discuss this in the longe ;-)
0
 
LVL 4

Expert Comment

by:EricWestbo
ID: 6975067
>>>I need a simple solution

Sounds like COBOL has the easiest solution in making the heading a graphic.  Quick, painless, browser friendly & will work in any email programs that read HTML format.

Of course, I thought of it first, but didn't respond quick enough.  ;)
0
 

Author Comment

by:klopter
ID: 6977187
I was hoping for a different answer, but it is nice to know what one's options are.  I'll give some thought to both your Excel suggestion, though I believe that though all of my audience have access to Windows, some refuse to us it.  Recasting the information as fewer columns also makes sense.  But, I think that I will probably try to abbreviate my headings to 4 or 5 characters.

COBOLdinosaur, EricWestbo:  Can I really include .gif's in an e-mail message and expect them to be handled by an e-mai program?  

Thanks,
  Ken

BTW, I sent this html table to several of my friends and discovered that many e-mail programs, including a widely used installation of pine and an even more widely used installation of Eudora rendered it as garbage.  The pine instalation simply spat out the html.  The Eudora implementation ignored the body of the table.  Fortunately, my intended audience was able to read it.
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6979229
Which is why I suggested Excel == not every mail client deals with HTML mail well, but just about all of them will handle an attachment. Then your users can decide what they want to do with it. And you can make the headings however you need.

Thanks for the A! ;-)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

937 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

Need Help in Real-Time?

Connect with top rated Experts

4 Experts available now in Live!

Get 1:1 Help Now