title: Vertical text in IE7, IE8, IE9, and IE10 with CSS only
body: <p>Does anyone know how to successfully implement vertical text in IE7, IE8, IE9, and IE10 with CSS only?  (by vertical text, I'm referring to text being rotated counterclockwise 90 degrees)</p>
  
  <p>This is what I have implemented today, which I think should be correct:</p>
  
  <pre><code>.counterclockwise-text {
  
  /* Chrome/Safari */
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: 50% 50%;
  
  /* Firefox */
  -moz-transform: rotate(-90deg);
  -moz-transform-origin: 50% 50%;
  
  /* IE9 */
  -ms-transform: rotate(-90deg);
  -ms-transform-origin: 50% 50%;
  
  /* This should work for IE10 and other modern browsers that do not need vendor prefixes */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  
  /* IE8 or less - using the "\9" CSS hack so that other browsers will ignore these lines */
  zoom: 1\9;
  writing-mode: tb-rl\9;
  filter: flipv fliph;
  
  }
  </code></pre>
  
  <p>However, IE10 is not ignoring the "\9" CSS hack -- it will pick up those values and rotate the text another 90 degrees.  A useful solution would be a way to do vertical text in IE8 and below that will not be picked up by IE10.  I really want to avoid having an IE8-only stylesheet, or having a media query to detect IE10.  I'm just looking for a way to modify the CSS above to have vertical text in all browsers.  Thank you!</p>
  
  <p>EDIT:</p>
  
  <p>For what it is worth, I also tried the code below that uses a filter to rotate the text.  This may work for most cases, but in my instance a lot of the text is cut off by the restricted (non-rotated?) constrains of the wrapping element.</p>
  
  <pre><code>.counterclockwise-text {
  
  /* Chrome/Safari */
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: 50% 50%;
  
  /* Firefox */
  -moz-transform: rotate(-90deg); 
  -moz-transform-origin: 50% 50%;
  
  /* IE9 */
  -ms-transform: rotate(-90deg);
  -ms-transform-origin: 50% 50%;
  
  /* IE10 and other modern browsers that do not need vendor prefixes */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  
  /* IE8 */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  
  /* IE7 or less */
  *zoom: 1;
  *writing-mode: tb-rl;
  *filter: flipv fliph;
  
  }
  </code></pre>
  
  <p>I still have not found a way to do this with pure CSS where IE10 and IE8 are happy.</p>