すべてのブラウザで縦書きテキスト（90度回転）を表示するにはどうすればよいですか？

Question

すべてのブラウザで縦書きテキスト（90度回転）を表示するにはどうすればよいですか？

alt text http://blogs.sun.com/oootnt/resource/sbres_1164126054_0__.png

Answer 1

This threadあなたがイメージにテキストを書き込み、画像を回転させることができることを示唆しています。

は、トリックを行うダメIE6のためにそれらのほとんどの勝利の1 =）

Answer 2

imagettftextかもしれないので、他のブラウザではIEで可能ではないように見えます。

Answer 3

PHP/HTML/CSSでテキストを回転させることはできません。しかし、テキストを含むGDでイメージを作成することはできます。

例：私の知る限りは、それが回転したテキストが画像でなければならないことを意味するので、それは、CSSで縦書きのテキストを取得することはできません知っているよう

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

。 PHPの 'libgdインターフェースで生成して画像ファイルを出力するのは非常に簡単です。

ただし、これは1つのスクリプトを使用して画像を生成し、もう1つは周囲のWebページを生成することを意味します。一般的に（インラインデータ：URIにもかかわらず）、1つのスクリプトで複数のページコンポーネントを作成することはできません。

Answer 5

問題は、サーバー側の言語から独立しています。垂直レンダリングされたテキストがテキストではなく画像ではない場合に問題がない場合は、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 6

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

Answer 7

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

あなたには、エコー

Answer 8

テキストの回転を行っていない他のブラウザでも可能です。

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 9

私はテーブルのヘッダー行が長すぎる場合は、以下の機能を使用します。使い方が簡単で速く、テキストの高さを計算する必要がないので、これは非常に便利です。&幅。これらの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 10

使用raphaeljs それは言うことはかなり愚かなことだった

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