Wie wird vertikaler Text (90 Grad gedreht) in allen Browsern angezeigt?

Question

Wie kann ich vertikalen Text (90 Grad gedreht) in allen Browsern anzeigen?

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

Answer 1

This thread schlägt vor, dass Sie Text zu einem Bild schreiben und drehen dann das Bild.

Es scheint mit IE möglich zu sein, aber nicht mit anderen Browsern so könnte es eines dieser kleinen Gewinn für IE6 =) imagettftext

Answer 2

sein oughta den Trick.

Answer 3

Ich glaube nicht, dass Sie Text mit PHP/HTML/CSS drehen können. Sie können jedoch ein Bild mit GD erstellen, das vertikalen Text enthält.

Beispiel:

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

Soweit ich weiß, dass es nicht möglich ist, vertikalen Text mit CSS zu bekommen, so dass bedeutet, dass der gedrehten Text in einem Bild sein. Es ist sehr einfach, mit PHP 'libgd Schnittstelle zu erzeugen, um eine Bilddatei auszugeben.

Beachten Sie jedoch, dass dies bedeutet, ein Skript zum Erstellen des Bildes und ein anderes zum Erstellen der umgebenden Webseite zu verwenden. Sie können nicht generell (Inline-Daten: URIs) ein Skript mehr als eine Seitenkomponente erzeugen lassen.

Answer 5

Das Problem ist unabhängig von der serverseitigen Sprache. Wenn es kein Problem ist, wenn der vertikal gerenderte Text nicht mehr Text, sondern ein Bild ist, wählen Sie solution provided by tharkun. Andernfalls gibt es Möglichkeiten, dies in der Präsentationsebene zu tun.

Zunächst gibt es (im Moment) eine IE-only-Lösung, die part of the CSS3 standard ist. Sie können check it live.

p { 
    writing-mode: tb-rl; 
} 

Die CSS3 text module auch einige properties for text orientation angeben.

Andere Jungs tun es 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; 
    } 

dort gehen Sie kein Echo

Answer 8

Text Rotation mit anderen Browsern möglich ist.

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

Ich verwende die Funktion unten, wenn Tabellenkopfzeilen sind zu lang. Es ist sehr nützlich, weil es einfach zu bedienen, schnell und Sie haben keine Texthöhe & Breite zu berechnen. Diese CSS-Gimmicks funktionieren einfach nicht.

####################################################### 
# 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

Verwenden raphaeljs Es funktioniert auf IE 6 auch

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