Solved

I would like a vertical font

Posted on 2002-04-26
14
238 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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 …

705 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

20 Experts available now in Live!

Get 1:1 Help Now