Question

我要求在浏览器中以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/

Explorer Canvas：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>

Answer 1

您的VML示例中的文字肯定会改变大小，因为您有 fitpath =“true”？如果你删除它，它会尊重你设置的大小。然后，您可以使用 v-text-align：left 样式属性在需要时左对齐。

Answer 2

您无法在客户端创建真正的带角度的文本，但this尽可能接近。最可靠的解决方案是在服务器端安装一个脚本，该脚本将一串文本作为输入，以一定角度创建一个带有文本的图像（使用一些图形库），然后在响应中流式传输图像。

Answer 3

你应该看看Raphael Js图书馆

http://raphaeljs.com/text-rotation.html

它抽象使用VML（用于IE）和SVG（用于所有其他浏览器）。它也与jQuery很好地配合。

在浏览器中以45度角显示文本的选项

3 个答案: