将文本从水平位置旋转到垂直位置

Question

是否可以将文本从单个点的水平位置旋转到垂直位置而无需使用类似Flash的内容？所以我会通过倾斜我的头来阅读相同的文本。

我就在想，你可以在jQuery的做到这一点，但无法找到一个插头。

Answer 1

我记得寻找到这个自己和发现，这是不是真的破解-y或不可能的。

IE允许

<div STYLE="writing-mode: tb-rl">Content rendered vertically</div> 

但据我所知这是行不通的其他地方（当然不会对FF 3）。

最好的解决方案似乎是使用图像（可能动态生成）。对不起，没有更多的帮助！

Answer 2

我不知道，如果it's任何帮助，但你可以做的两个步骤：

• 使用像PHP服务器端解决方案，将文本信息转换成图像
• 旋转使用jquery插件（例如jquery-rotate）的图像

问题是，结果是图像，而不是文本了。

Answer 3

您可能不得不使用SVG代替HTML--当然，并非所有浏览器都支持SVG，有些则比其他更好。

Answer 4

webkit提出了一些新的CSS specifications。它们目前仅在夜间和Apple的Safari 4开发者预览版中实施。

Answer 5

我问了几个关于这个主题我自己的问题...

您可以用动态图像做到这一点 - 虽然that has its problems (C# example)。

你也可以在IE中用CSS来做到这一点。

新的CSS转换在最新的Safari，Chrome和FX don't quite work either (includes example)。

Answer 6

CSS将允许...

-webkit-transform：rotate（-90deg）; -moz-transform：rotate（-90deg）; filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）;

该元素还必须是display：block。

Answer 7

我用纯CSS和它的工作很对我很好，这里是代码：

<div style="-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); z-index:inherit; float:left">Not at all</div>