【发布时间】：2010-12-13 01:09:43
【问题描述】：
我需要在浏览器中以 45 度角显示文本。 文本是通过 ajax 调用从许多值中选择的。 文本长度不等，最多 100 个字符。需要显示第一部分和最后几个字符（我可以弄清楚这部分）。 例如： "这是正文，可能很长...正文的结尾部分"
我将拥有 1 到 6 个这样的字符串。 例如，考虑一个带有标题文本的表格，相当长，从左下角到右上角以 45 度角显示。
如果可能，希望跨浏览器，但必须在兼容模式下在 IE6 和 IE8 上工作。从 IE6 升级目标基础不受我控制。
如果可能的话，希望只有客户端的解决方案。文本是通过 ajax 从服务器中提取的，并且来自具有 15,000 多个不同文本字符串值的数据库，并且将来会增长到超过 185,000 个文本值。
想象一个表格，其标题文本项向上显示，堆叠在太窄而无法显示文本的列上。
考虑的选项： VML 似乎可行，但似乎不尊重字体的样式大小，短字符串是大字体，长字符串更小，我希望它们的大小都相同。
示例代码：
<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 - 在没有插件的情况下无法在 IE 中工作
JPG、GIF - 需要往返服务器来创建图形，影响性能。
Processing.js http://processingjs.org/
探索者画布：http://excanvas.sourceforge.net/
除了阅读网站文本之外，对 Processing.js 或 excanvas 知之甚少。
此处描述的位置类型选项：http://jdstiles.com/java/angledtext2.html
Flash - 这里不是一个真正的选择。
为此还有哪些其他选择？
其他信息： 这里已经有 jQuery。用它来做 ajax 部分。 服务器端为asp.net c# .Net 2.0框架（近期会升级）
Edit1：当前 VML 示例似乎适用于目标受众（不是跨浏览器，但使用在目标浏览器上速度很快的 VML）
<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>
【问题讨论】：
-
我认为这两种字体替换方法不会旋转您的文本，但它们是有趣的替代方案：sIFR (mikeindustries.com/blog/sifr) 和 cufon (wiki.github.com/sorccu/cufon/about)
-
@fudgey - 感谢您指出这两个。第一个使用闪光灯，我想远离它。第二个使用 SVG 和 VML 技术——因为我在这里直接有 VML 选项，这将牺牲跨浏览器兼容性。