title: How do I rotate individual letters and keep them flowing left-to-right?
body: <p>I am trying to get a string with each individual letter rotated 90 degrees; however, I want to keep the "flow" of letters going left-to-right, not vertical. I also want to keep that "strikethrough" horizontal green line (see images below).</p>
  
  <p>What's the simplest way to accomplish this? I prefer using JavaScript and/or CSS.</p>
  
  <p>With the <code>-transform: rotate</code> CSS style I get the following:</p>
  
  <p><img src="https://i.stack.imgur.com/vnNUf.png" alt="do not want"></p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .rotate {
  -webkit-transform: rotate(-90deg);
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;div class="rotate"&gt;
  &lt;span style="color:#0C0; text-decoration:line-through;"&gt;
  &lt;span style="color:#000;"&gt;
  A B C
  &lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p>What I would like to get is something like this, without resorting to a custom font.</p>
  
  <p><img src="https://i.stack.imgur.com/sQJiz.png" alt="enter image description here"></p>