Monday, March 10, 2008

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.

4 comments:

Unknown said...

Thanks for this. It is a little harder than I hoped, but it does work....I am trying to find something that will take an array of strings and turn them into vertical column heads for a table...that will work in all browsers.

Anonymous said...

Thanks a lot man.............. you are really brilliant......... your hard work never fails. all the best for your future

Scott Gale said...

I went with this method, very similar but a couple changes: http://scottgale.com/blog/css-vertical-text/2010/03/01/

I love CSS3, now we just need to get it supported in all browsers.

Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards