1

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

代替テキスト
(ソース: sun.com )

4

10 に答える 10

7

この問題は、サーバー側の言語とは無関係です。垂直にレンダリングされたテキストがテキストではなく画像になっても問題ない場合は、tharkun が提供する解決策を選択してください。それ以外の場合は、プレゼンテーション層で行う方法があります。

まず、(現時点では) CSS3 標準の一部である IE 専用のソリューションがあります。ライブで確認できます。

p {
    writing-mode: tb-rl;
}

CSS3 テキスト モジュールは、テキストの向きのいくつかのプロパティも指定します。

他の人は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

raphaeljs を使用 IE 6 でも動作します

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

于 2013-05-31T09:30:17.603 に答える
0

このスレッドは、画像にテキストを書き込んでから画像を回転できることを示唆しています。

IE では可能ですが、他のブラウザでは不可能なようです。

于 2009-04-21T07:07:28.323 に答える
0

imagettftextでうまくいくはずです。

于 2009-04-21T07:09:50.957 に答える
0

私が知る限り、CSS で縦書きのテキストを取得することはできないため、回転したテキストは画像内にある必要があります。libgdイメージ ファイルを出力するための PHP のインターフェイスを使用して生成するのは非常に簡単です。

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

于 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 に答える