how to make vertical text in js with browser compatibility

[avinash sh]

I am using CSS property [writing mode:tb-rl] to make vertical text using java script.it is working fine with IE browser but not with mozila firefox... do anyone have any simple solution for the same....?? I do'nt want to use image control for that because it is so painful coding .. please suggest me what to do?

[acoder]

Does this link help?

[avinash sh]

verical text in VS 2008 and should work on FF & IE

thanx for reply but i am making ASP.net application and using visual studio 2008 for IDE and it is not working into this IDE.. ? and also it should be work in IE-7 and FF..?

[acoder]

You could just type it directly into the file.

If you want to avoid SVG, you can just use JavaScript to add line breaks (the <br> tag) after each character.

[avinash sh]

ok.. but in <br>
a
v
i
n
a
s
h
type of output will displayed..i want a output like whole word should be
rotate by 90 degree..?

[acoder]

Clockwise or anti-clockwise?

[avinash sh]

i want a output same as (writing-mode:tb-rl).. as u asked it should be clockwise..?tha nxx

[acoder]

Ah, I see-a complete rotation. Well, SVG would work here as would the canvas tag.

If your IDE doesn't support these tags, etc., edit the file directly. Here's a simple SVG tutorial.

[avinash sh]

but canvas is not works in IE ... i m makin the application with IE & FF compatibility?
sso what should i do... plz suggest me...?

[acoder]

For IE, you can use what you're using now. You can use canvas for all other browsers.

[avinash sh]

a lot f thanx but i have to made a single common code for my application which will works on both of the browser.... i c'nt use the two different code for different browser for a single functionality.. ..?plz suggest me?

[acoder]

That's not a problem at all. You can put the text (with writing-mode set) within the canvas tags for browsers which don't support it. See the section Fallback Content on this page:

This is very straightforward : we just provide alternative content inside the canvas element. Browsers which don't support <canvas> will ignore the container and render the fallback content inside it. Browsers which do support <canvas> will ignore the content inside the container, and just render the canvas normally.

[avinash sh]

but i am not able to make text vartical using canvas... can u send me some code example?

[avinash sh]

plz help me how to make text vertical using canvas?

[acoder]

Here's one example. It uses SVG rather than canvas. Just one way of doing it.