I have a requirement to display text at a 45 degree angle in the browser. The text is selected via ajax calls from a selection of a lot of values. Text varies in length up to 100 characters. Need to display the first part and the last few characters (I can figure this part out). For example: "This is the text and it can be quite long...end part of text"
I will have from 1 to 6 of these strings. For a example, think of a table with the header text, quite lengthy, displayed at a 45 degree angle from bottom left to upper right.
Would like to be cross browser IF possible but MUST work on IE6 and IE8 in compatibility mode. Target base upgrade from IE6 is out of my control.
Would like a client side ONLY solution if at all possible. Text is pulled from server via ajax, and comes from a database with 15,000+ different text string values and will grow to over 185,000 text values in the future.
Think of a table with the header text items displayed in an upwards direction stacked on columns that would be too narrow to display the text.
Considered options: VML Seems to work, but does NOT seem to respect the style size for the font, short strings are large font, longer are smaller, and I want them to be all the same size.
Example code:
<v:shape style="position: absolute; top: 25px; left: 50px; width: 300px; height: 300px;
antialias: true" coordsize="300,300">
<v:path textpathok="True" v="m 0,300 l 300,0" />
<v:fill on="True" color="#0101FF" />
<v:stroke on="false" />
<v:textpath on="True" fitpath="true" string="My text string, quite long in length and of various length...end of text"
style="font:normal normal bold 8pt Arial" />
</v:shape>
SVG - does not work in IE without a plugin
JPG, GIF - requires round trip to server to create the graphic, impacts performance.
Processing.js http://processingjs.org/
Explorer Canvas: http://excanvas.sourceforge.net/
Do not know much (anything) about Processing.js or excanvas beyond reading the web sites text.
Positional type option as described here: http://jdstiles.com/java/angledtext2.html
Flash - not really an option here.
What Other options exist for this?
Other info: Have jQuery here already. Using it to do the ajax part. Server side is asp.net c# .Net 2.0 framework (will upgrade in near future)
Edit1: Current sample of VML which seems to work for the target audience (NOT cross browser, uses VML which is fast on the target browser though)
<v:shape style="position: absolute; top: 25px; left: 50px; width: 300px; height: 300px;
antialias: true" coordsize="300,300">
<v:path textpathok="True" v="m 0,300 l 300,150" />
<v:fill on="True" color="#0101FF" />
<v:stroke on="false" />
<v:textpath on="True" fitpath="false" string="My text string, quite long in length and of various length...end of text"
style="v-text-align:left; font:normal normal 8pt Arial" />
</v:shape>
Surely the text in your VML example is changing size in size because you have fitpath="true" ? If you remove it then it respects the size you have set. You can then use the v-text-align:left style attribute to left align it if you need.