Solved

I would like a vertical font

Posted on 2002-04-26
14
276 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
[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
  • 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
Technology Partners: 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 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
 
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

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
Adding a countdown to HTA 12 99
Change how page is organized 3 39
Popup write two lines 3 22
Boolean 13 28
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

730 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