Vertical Text

Firefox 3.1 comes with css transform. I learn IE also has matrix equally.

Previously, I use writing-mode: tb-rl; filter: flipv fliph; for IE vertical text. Unfortunately, the text is very jagged after rotated. I decide to give matrix a try.

For IE, method 1

<style>
.vt {
writing-mode: tb-rl; filter: flipv fliph; 
white-space:nowrap; font-size:12px; font-family:arial; letter-spacing:2px
}
</style>
<div class="vt">Vertical Text</div> 

---

For IE, method 2

<style>
.displayretainer {
width:160px;text-align:right; z-index:25; 
font-family:arial; font-size:12px; letter-spacing:2px
}
</style>

<div id="vt" class="displayretainer" 
style="filter:progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand');">
Vertical Text
</div>

<SCRIPT>
var deg2rad = Math.PI * 2 / 360;
function setRotation(obj, deg) {
  var rad = deg * deg2rad;
  var costheta = Math.cos(rad);
  var sintheta = Math.sin(rad);
  
  obj.filters.item(0).M11 = costheta;
  obj.filters.item(0).M12 = -sintheta;
  obj.filters.item(0).M21 = sintheta;
  obj.filters.item(0).M22 = costheta;
}

setRotation(document.getElementById("vt"), 270)
</SCRIPT>

Still, the text is very jagged. The matrix filter is quite mathematical. Not sure any other attribute can smooth the font.