Monday, March 10, 2008

Use CSS to create vertical Text

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

.vt {
writing-mode: tb-rl;
filter: flipv fliph;

<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" "">
<svg version="1.1" xmlns="" xmlns:xlink="">
<script type="text/javascript">
//this will create htmljavascriptfunctionname in html document and link it to changeText
top.htmljavascriptfunctionname = changeText;
function changeText(txt){
var newText = document.createTextNode(txt);
// ]]>
<text id="thetext" transform="rotate(270, 90, 0)" font-size="12" x="3" y="-60" font-family="Verdana">Vertical Text</text>

The svg code is modified from
I just make it work, but I think the width/height will change base on content.


Joseph 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.

Arun 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:

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