如何在所有浏览器中显示垂直文本（旋转90度）？

Question

如何在所有浏览器中显示垂直文本（旋转90度）？

（来源：sun.com）

Answer 1

该问题独立于服务器端语言。如果垂直渲染的文本不再是文本而不是图像时不是问题，请选择solution provided by tharkun。否则，有一些方法可以在表示层中执行此操作。

首先，（目前）是一个仅限IE的解决方案，即part of the CSS3 standard。你可以check it live。

p {
    writing-mode: tb-rl;
}

CSS3 text module也指定了一些properties for text orientation。

其他人这样做with SVG。

Answer 2

   function verticletext($string)
    {
       $tlen = strlen($string);
       for($i=0;$i<$tlen;$i++)
       {
            echo substr($string,$i,1)."<br />";   
       }
    }

Answer 3

我不认为你可以用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);

Answer 4

function verticletext($string)
    {
       $tlen = strlen($string);
       for($i=0;$i<$tlen;$i++)
       {
            $vtext .= substr($string,$i,1)."<br />";   
       }
       return $vtext;
    }

你没有回音

Answer 5

其他浏览器也可以旋转文本。

CSS：

/*Safari*/
-webkit-transform: rotate(-90deg);

/*Firefox*/
-moz-transform: rotate(-90deg);

/*Opera*/
-o-transform: rotate(-90deg);

/*IE*/
writing-mode: tb-rl;
filter: flipV flipH;

Answer 6

如果表标题行太长，我会使用下面的函数。它非常有用，因为它易于使用，速度快，而且您无需计算文本高度和宽度。那些css-gimmicks只是不起作用。

#######################################################
# 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'>";

}

Answer 7

This thread建议您可以将文本写入图像然后旋转图像。

它似乎可以与IE，但不与其他浏览器，所以它可能是IE6的那个小胜利之一=）

Answer 8

imagettftext oughta做的伎俩。

Answer 9

据我所知，用CSS获取垂直文本是不可能的，这意味着旋转的文本必须在图像中。使用PHP的'libgd接口生成输出图像文件非常简单。

但请注意，这意味着使用一个脚本生成图像，另一个脚本生成周围的网页。您通常不能（内联数据：URI尽管如此）有一个脚本生成多个页面组件。

Answer 10

使用raphaeljs它也适用于IE 6

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