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

Question

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

_{（来源：sun.com）}

Answer 1

该问题与服务器端语言无关。 如果垂直呈现的文本不再是文本而是图像时没有问题，请选择 tharkun提供的解决方案。 否则，在表示层有办法做到这一点。

首先，（目前）有一个仅限 IE 的解决方案，它是 CSS3 标准的一部分。 您可以实时查看。

p {
    writing-mode: tb-rl;
}

CSS3 文本模块还指定了一些文本方向属性。

其他人使用 SVG 来 。

Answer 2

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

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

你去那里没有回声

Answer 4

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

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 5

如果表标题行太长，我使用下面的函数。 它非常有用，因为它易于使用、速度快，而且您无需计算文本高度和文本高度。 宽度。 那些 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'>";

}

Answer 6

此帖子建议您可以将文本写入图像，然后旋转图像。

IE 似乎可以，但其他浏览器不行，所以这可能是 IE6 的小胜利之一 =)

Answer 7

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

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

Answer 8

使用拉斐尔js
它也适用于 IE 6

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

Answer 9

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