Use CSS to create vertical Text

IE got more simple solution by setting style attribute "writing mode".


<style>
.vt {
writing-mode: tb-rl;
filter: flipv fliph;
}
</style>

<div class="vt">Vertical Text</div>


For the rest of browsers, need to use SVG.

<embed class="svgex" src="vertical_text.svg" type="image/svg+xml" frameborder="no" width="30" height="90" />


For svg,

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/javascript">
<![CDATA[
//this will create htmljavascriptfunctionname in html document and link it to changeText
top.htmljavascriptfunctionname = changeText;
function changeText(txt){
targetText=document.getElementById("thetext");
var newText = document.createTextNode(txt);
targetText.replaceChild(newText,targetText.childNodes[0]);
}
// ]]>
</script>
<text id="thetext" transform="rotate(270, 90, 0)" font-size="12" x="3" y="-60" font-family="Verdana">Vertical Text</text>
</svg>

The svg code is modified from http://www.thescripts.com/forum/thread721811.html.
I just make it work, but I think the width/height will change base on content.