모든 브라우저에서 세로 텍스트 (90도 회전)를 표시하는 방법은 무엇입니까?

Question

모든 브라우저에서 세로 텍스트 (90도 회전)를 표시하려면 어떻게해야합니까?

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

Answer 1

This thread는 이미지에 텍스트를 작성하고 이미지를 회전 할 수 있음을 시사한다.

는 트릭을 할 정도면 IE6에 대한 그 작은 승리 중 하나 =)

Answer 2

imagettftext 될 수 있도록 다른 브라우저로 IE와 가능하지만 것으로 보인다.

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

지금까지 내가 그 회전 된 텍스트가 이미지에 있어야한다는 것을 의미한다 그래서, CSS 수직 텍스트를 얻을 수 없습니다 알고있다. PHP의 'libgd 인터페이스로 생성하여 이미지 파일을 출력하는 것은 매우 간단합니다.

그러나 이것은 하나의 스크립트를 사용하여 이미지를 생성하고 다른 하나는 주변 웹 페이지를 생성한다는 것을 의미합니다. 일반적으로 (인라인 데이터 : URI에도 불구하고) 하나의 스크립트에서 둘 이상의 페이지 구성 요소를 생성 할 수 없습니다.

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

} 그것은 IE 6에서 작동

Answer 10

사용 raphaeljs 도

말을 아주 어리석은 일이라고

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