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]

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..?thanxx

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

[drhowarddrfine]

'writing-mode' was a proprietary attribute for IE until it was introduced into CSS3. I don't know what other browsers support that right now.

You can look into Firefox's vendor extensions to see if there's something there that does the vertical thing you want.

[avinash sh]

thanx .. but how to use svg in asp.net 3.5 application .... n how can also include IE functionality in the same?

[avinash sh]

i tried to use SVG in asp.net 3.5 but it is not supported by asp.net....?

[avinash sh]

plz rply me what should i do in this condition,,,,,.,?

[acoder]

First, get it working in plain HTML. Getting it working in ASP.NET is not a question for this forum (ask in ASP.NET), though I would assume it shouldn't be difficult.

[drhowarddrfine]

As you said above, SVG does not work in Internet Explorer so I'm not surprised it's not supported in any Microsoft product. You should be able to write the HTML to get SVG to work in the modern browsers but it just won't happen in IE.