solution to display text rotated 90 vertically in firefox css

[austincollins]

I have been searching for hours to find a solution to display text rotated at 90 degrees in firefox, and could not find one. css3 and IE has the css command "writing-mode: tb-rl;" but this does not work in firefox. i came to conclusion that SVG is the solution. I have been playing with SVG for few hours now and it is brilliant, you can do graphics and animation like flash but text and javascript based!. anyway check this out, this is one solution to do it in svg and it works.

put this in html document

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

and here is the svg file

[CODE=xml]<?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="ht tp://www.w3.org/1999/xlink">
<script type="text/javascript">
<![CDATA[
//this will create htmljavascriptf unctionname in html document and link it to changeText
top.htmljavascr iptfunctionname = changeText;

function changeText(txt) {
targetText=docu ment.getElement ById("thetext") ;
var newText = document.create TextNode(txt);
targetText.repl aceChild(newTex t,targetText.ch ildNodes[0]);
}
// ]]>
</script>
<text id="thetext" transform="rota te(90,4,4)" font-size="10" x="4" y="4" font-family="Verdana ">this text is rotated </text>

</svg>[/CODE]

This idea could be developed further to create the svg object in the html document dom, dynamically with javascript and therefore with no external svj file or an embed object being required. if this woudl be useful to you let me know

[drhowarddrfine]

SVG is great and it should be used everywhere but it only works in modern browsers and not IE6/7.

[ClassicalMark]

Rotating text: can I change text with javascript?

It's been a couple years since this thread was started, so I hope I'm not too late. Please reply if you can.

I can get this to work--sort of. Following the instructions, I get the text line saying "This line is rotated" turned 90 degrees. Terrific. But the CDATA section in the svg document contains a javascript function with a parameter: txt, which to me suggests that I should be able to call that function from within the HTML document (in javascript, of course), include a different line of text as the argument, and have that new text rotated. But I can't get it to work. I can't call the function from the HTML document: I get an "Undefined variable" error. And since the .svg file is embedded, I can't figure out how to address it (ie, with something like embed.document. getElementById( ) or embed.changeTex t(new text). I've tried moving the changeText() function to the HTML document, but again, I can't then get the internal function statements to point to the .svg file.

I'm reasonably competent with HTML and javascript, but I've never worked with .svg before. I read up on it a bit, but the problem doesn't seem to be with .svg per se; it's with linking the .svg file to the HTML document.

This idea could be developed further to create the svg object in the html document dom, dynamically with javascript and therefore with no external svj file or an embed object being required. if this woudl be useful to you let me know

Maybe this is the answer. It sounds like it should be. Has anyone worked out how to do it?

FYI: I'm using Opera 9.64, not Firefox. But since I get the correct rotation of the original line, I can't imagine the problem is with the browser.

[AsafAmit]

Hi,

At the beginning of the CDATA section, see this assignment:

top.htmljavascr iptfunctionname = changeText;

This "binds" the function changeText (which is in the context of the SVG object), to a function (called htmljavascriptf unctionname which you need to call ) in the containing HTML document.

So in your HTML page, call the function htmljavascriptf unctionname() whenever you want to change the text. e.g.

htmljavascriptf unctionname("my next text");

This works on FF 3.5, I assume it will on Opera.

Hope this helps,
Asaf.

[ClassicalMark]

Thanks for the tip, AsafAmit. I'll give it a try.

I finally did figure out another way to do it. First move the changeText function to the HTML document. From within that HTML doc, open the .svg doc with javascript, assigning a variable to the window.open statement:

turnTextPage = window.open( "savedDocument.svg","","params, etc.");

Then add the variable name to the changeText function:

function changeText( lineID, text ){
	targetText = turnTextPage.document.getElementById( lineID ) ;
	var newText = turnTextPage.document.createTextNode( text ) ;
	targetText.replaceChild( newText, targetText.childNodes[0] );
}

SInce the function is now in the HTML doc, you can call it the normal way, and the text lines will be transferred to the .svg doc.

[threecuptea]

display vertical text dynamically in loop

I tried to replace flash SWF object with sgv object. The followings are my code. The result is as the attached. It's not right.
I am more a server side person (JSF). Not 1 Javascript person Need some instruction to get this work. Thanks[IMG]file:///home/sling/dashboard.png[/IMG]
The image might not work. Basically, it display once out of place (in top of screen. All vertical line with undefined wording.

<t:dataList id="profileList" var="profile" value="#{Dashboard2Bean.profileList}" rowIndexVar="row">
					<td rowspan="2">                        
                        <div id="verticalTextDiv">
                         <script type="text/javascript">
                             var output = '<h:outputText value="#{profile.vendorAbbrvName}" /> - <h:outputText value="#{profile.name}" />';
                             document.writeln(displayVerticalText(output));
                        </script>
                        </div>
					</td>
				</t:dataList>