如何在所有浏览器中显示垂直文本（旋转 90 度）？
（来源：sun.com）
问问题
18647 次
10 回答
7
该问题与服务器端语言无关。如果垂直渲染的文本不再是文本而是图像时没有问题，请选择tharkun 提供的解决方案。否则，有办法在表示层中做到这一点。
首先，（目前）有一个仅限 IE 的解决方案，它是CSS3 标准的一部分。你可以现场查看。
p {
writing-mode: tb-rl;
}
其他人用 SVG来做。
于 2009-04-21T09:29:25.207 回答
5
我认为您不能使用 PHP/HTML/CSS 旋转文本。但是您可以使用GD创建包含垂直文本的图像。
例子：
header ("Content-type: image/png");
// imagecreate (x width, y width)
$img_handle = @imagecreatetruecolor (15, 220) or die ("Cannot Create image");
// ImageColorAllocate (image, red, green, blue)
$back_color = ImageColorAllocate ($img_handle, 0, 0, 0);
$txt_color = ImageColorAllocate ($img_handle, 255, 255, 255);
ImageStringUp ($img_handle, 2, 1, 215, $_GET['text'], $txt_color);
ImagePng ($img_handle);
ImageDestroy($img_handle);
于 2009-04-21T07:11:13.947 回答
1
function verticletext($string)
{
$tlen = strlen($string);
for($i=0;$i<$tlen;$i++)
{
$vtext .= substr($string,$i,1)."<br />";
}
return $vtext;
}
你去那里没有回声
于 2010-06-15T05:43:15.077 回答
1
如果表头行太长，我使用下面的函数。它非常有用，因为它易于使用、速度快，而且您不必计算文本的高度和宽度。那些 CSS 噱头是行不通的。
#######################################################
# convert text to image and embed it to html
# uses /tmp as a cache to make it faster
# usage: print imagetext("Hello my friend");
# Created by Ville Jungman, GPL-licenced, donated by www.varuste.net
function imagetext($text,$size = 10,$color = array(253,128,46)){
$dir = "/tmp/tekstit";
$filename = "$dir/" . base64_encode($text);
if(!file_exists($filename)){
$font = "/usr/share/fonts/truetype/freefont/FreeSans.ttf";
$box = imagettfbbox($size,90,$font,$text);
$w = -$box[4] - 1;
$h = -$box[3];
$im = imagecreatetruecolor($w,$h);
$white = imagecolorallocate($im,$color[1],$color[2],$color[3]);
$black = imagecolorallocate($im, 0x00, 0x00, 0x00);
imagecolortransparent($im,$white);
imagefilledrectangle($im, 0, 0, $size, 99, $white);
imagettftext($im,$size,90,$size,$h,$black,$font,$text);
@mkdir($dir);
imagepng($im,$filename);
imagedestroy($im);
}
$data = base64_encode(file_get_contents($filename));
return "<img src='data:image/png;base64,$data'>";
}
于 2011-10-18T15:22:29.803 回答
1
其他浏览器也可以进行文本旋转。
CSS：
/*Safari*/
-webkit-transform: rotate(-90deg);
/*Firefox*/
-moz-transform: rotate(-90deg);
/*Opera*/
-o-transform: rotate(-90deg);
/*IE*/
writing-mode: tb-rl;
filter: flipV flipH;
于 2010-07-07T10:19:00.217 回答
0
这个线程建议您可以将文本写入图像，然后旋转图像。
IE 似乎可以，但其他浏览器则不行，所以它可能是 IE6 的小胜利之一 =)
于 2009-04-21T07:07:28.323 回答
0
使用 raphaeljs 它也适用于 IE 6
于 2013-05-31T09:30:17.603 回答
0
imagettftext应该做的伎俩。
于 2009-04-21T07:09:50.957 回答
0
据我所知，使用 CSS 获取垂直文本是不可能的，这意味着旋转后的文本必须在图像中。使用 PHP 的libgd接口生成输出图像文件非常简单。
但是请注意，这意味着使用一个脚本来生成图像，而另一个脚本来生成周围的网页。您通常不能（内联数据：尽管有 URI）让一个脚本生成多个页面组件。
于 2009-04-21T07:11:22.450 回答
-3
function verticletext($string)
{
$tlen = strlen($string);
for($i=0;$i<$tlen;$i++)
{
echo substr($string,$i,1)."<br />";
}
}
于 2010-06-14T10:23:08.120 回答