Thursday, February 12, 2009

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

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

For IE, method 2

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

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

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)

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

1 comment:

Anonymous said...

I use vertical text all the time in IE and the font looks fine.

I did have a problem once on screens that used the cleartype option - if the element containing the vertical text didn't have the background colour set explicitly in css the text would look messy.