Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

I would like a vertical font

Posted on 2002-04-26
14
Medium Priority
?
295 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 600 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
Industry Leaders: 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

610 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