Question

I’m trying to replicate Excel’s Vertical Text feature in HTML and wondering if anyone has tried this or knows of an easy way to do this?

I want my text to look like:

T

H

I

S

inside of a <th> element

Answer 1

You could try this. Gives a little more control over spacing than using <br />

From the site:

CSS:

#vertical {
  width:15em; 
  padding:0;
  margin:0 auto; 
  list-style-type:none; 
  font-size:1.4em; 
  font-family:georgia, "times new roman", serif;
  }
#vertical li {
  float:left; 
  border:0.2em solid #eee;
  margin:0.1em;
  }
#vertical li a {
  text-decoration:none; 
  color:#000; 
  display:block; 
  width:1.5em; 
  height:1.5em; 
  border-top:0.1em solid #000; 
  height:auto;
  }
#vertical li a em {
  font-style:normal; 
  display:block; 
  text-align:center; 
  background:#fff; 
  border-left:0.1em solid #000; 
  border-right:0.1em solid #000;
  }
#vertical li a em.nd {
  border-bottom:0.1em solid #000;
  }
#vertical li a:hover {
  background:#eee;
  }
#vertical li a:hover em {
  background:#eee; 
  color:#800;
  }

And the markup:

<ul id="vertical">
  <li>
    <a href="../menu/index.html">
      <em>D</em><em>E</em><em>M</em>
      <em>O</em><em class="nd">S</em>
    </a>
  </li>
  <li>
    <a href="../menus/index.html">
      <em>M</em><em>E</em><em>N</em>
      <em>U</em><em class="nd">S</em>
    </a>
  </li>
  <li>
    <a href="../layouts/index.html">
      <em>L</em><em>A</em><em>Y</em><em>O</em>
      <em>U</em><em>T</em><em class="nd">S</em>
    </a>
  </li>
  <li>
    <a href="../boxes/index.html">
      <em>B</em><em>O</em><em>X</em>
      <em>E</em><em class="nd">S</em>
    </a>
  </li>
  <li>
    <a href="../mozilla/index.html">
      <em>M</em><em>O</em><em>Z</em><em>I</em>
      <em>L</em><em>L</em><em class="nd">A</em>
    </a>
  </li>
  <li>
    <a href="../ie/index.html">
      <em>E</em><em>X</em><em>P</em><em>L</em>
      <em>O</em><em>R</em><em>E</em><em class="nd">R</em>
    </a>
  </li>
  <li>
    <a href="../opacity/index.html">
      <em>O</em><em>P</em><em>A</em><em>C</em>
      <em>I</em><em>T</em><em class="nd">Y</em>
    </a>
  </li>
</ul>