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

【问题标题】：How to display vertical text (90 degree rotated) in all browsers?如何在所有浏览器中显示垂直文本（旋转 90 度）？
【发布时间】：2010-10-20 18:13:56
【问题描述】：

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

_{（来源：sun.com）}

【问题讨论】：

说这话很愚蠢；它是一种编程语言，并且和大多数语言一样，可以访问图像修改功能......

标签： browser cross-browser text-rotation

【解决方案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。

【讨论】：

【解决方案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);

【讨论】：

【解决方案3】：

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

你去没有回声

【讨论】：

【解决方案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;

【讨论】：

虽然这适用于所有现代浏览器，但旧浏览器不支持。

【解决方案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'>";

}

【讨论】：

【解决方案6】：

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

在 IE 上似乎可行，但在其他浏览器上则不行，因此它可能是 IE6 的小胜利之一 =)

【讨论】：

IE 可以使用仅限 IE 的专有标签来做到这一点。大多数其他主要浏览器（Firefox、Safari、Opera 等）都可以使用开放的 Web 标准：SVG。（2001 年发布，微软的支持仍然为零。）我在这里看不到 IE 的任何胜利。 :-)

【解决方案7】：

imagettftext 应该做到这一点。

【讨论】：

【解决方案8】：

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

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

【讨论】：

@Verandaguy 在三年半前写下这个答案时，它并没有得到很好的支持

【解决方案9】：

使用 raphaeljs 它也适用于 IE 6

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

【讨论】：

【解决方案10】：

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

【讨论】：

欢迎您，在这里，解释为什么要使用您的解决方案而不只是如何使用是一个很好的做法。这将使您的答案更有价值，并帮助进一步的读者更好地理解您是如何做到的。我还建议您查看我们的常见问题解答：stackoverflow.com/faq。