Comment afficher du texte vertical (90 degrés rotation) dans tous les navigateurs?

Comment puis-je afficher le texte vertical (90 degrés rotation) dans tous les navigateurs?

Comment afficher du texte vertical (90 degrés rotation) dans tous les navigateurs?

_{(source: sun.com)}

C'était un joli chose stupide à dire; c'est un langage de programmation et, comme la plupart, il a accès à de l'image de la modification de la fonctionnalité...

InformationsquelleAutor | 2009-04-21

7

Le problème est indépendant du langage côté serveur. Si ce n'est pas un problème lorsque l'verticalement texte rendu n'est pas le texte, mais plus une image, choisissez l' la solution fournie par tharkun. Sinon, il y a des façons de le faire dans la couche de présentation.

Tout d'abord, il y a (pour le moment) un IE seule solution, qui est la partie de la norme CSS3. Vous pouvez vérifier en live.
```
p {
    writing-mode: tb-rl;
}
```
La CSS3 module de texte également préciser certaines propriétés de l'orientation du texte.

Autres faire ça avec SVG.

InformationsquelleAutor Török Gábor

Je ne pense pas que vous pouvez faire pivoter le texte avec PHP/HTML/CSS. Mais vous pouvez créer une image avec GD contenant du texte vertical.

Exemple:

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);

Ce qui, pour $back_color?

InformationsquelleAutor markus

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

là vous allez, pas d'écho

InformationsquelleAutor sourceboy

1

La rotation du texte est également possible avec d'autres navigateurs.

CSS:
```
/*Safari*/
-webkit-transform: rotate(-90deg);

/*Firefox*/
-moz-transform: rotate(-90deg);

/*Opera*/
-o-transform: rotate(-90deg);

/*IE*/
writing-mode: tb-rl;
filter: flipV flipH;
```
- Alors que cela fonctionne sur tous les navigateurs modernes, il est non pris en charge par les plus âgés.
InformationsquelleAutor mark

- Je utiliser la fonction ci-dessous si la table d'en-tête de lignes sont trop longues. C'est très utile, car il est facile à utiliser, rapide et vous n'avez pas à calculer la hauteur de texte & largeur. Ceux css-trucs ne fonctionnent tout simplement pas.

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

}

InformationsquelleAutor viljun

0

Ce fil suggère que vous pouvez écrire du texte à une image, puis faites pivoter l'image.

Il semble possible avec IE mais pas avec d'autres navigateurs de sorte qu'il pourrait être une petite victoire pour IE6 =)
- C'est à dire peut le faire avec un IE seule propriétaire de la balise. La plupart des autres principaux navigateurs (Firefox, Safari, Opera, etc.) pouvez le faire avec un standard du web: SVG. (Sorti en 2001, toujours le soutien de zéro à partir de Microsoft.) Je ne vois pas de quelle victoire pour IE ici. 🙂
InformationsquelleAutor Eric
0

imagettftext devrais faire l'affaire.

InformationsquelleAutor Hexagon Theory
0

Autant que je sache, il n'est pas possible d'obtenir le texte vertical en CSS, cela signifie donc que la rotation de texte dans une image. Il est très simple de générer avec PHP' libgd interface de sortie d'un fichier image.

Note toutefois que cela signifie d'utiliser un script pour produire l'image, et un autre pour produire les environs de la page web. Vous ne pouvez pas généralement (données en ligne: URI nonobstant) ont un script de produire plus d'un composant de la page.
- il n'a pas été bien pris en charge trois ans et demi, lorsque cette réponse a été écrit
InformationsquelleAutor Alnitak
0

Utilisation raphaeljs
Il fonctionne sur IE 6

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

InformationsquelleAutor Bhavesh B
-3
```
   function verticletext($string)
    {
       $tlen = strlen($string);
       for($i=0;$i<$tlen;$i++)
       {
            echo substr($string,$i,1)."<br />";   
       }
    }
```
- Bienvenue sur DONC, ici, c'est une bonne pratique pour expliquer pourquoi l'utilisation de votre solution et non pas seulement comment. Qui feront de votre réponse le plus précieux et aider à renforcer lecteur à avoir une meilleure compréhension de la façon dont vous le faites. Je suggère également que vous avez un coup d'oeil sur notre FAQ : stackoverflow.com/faq.
InformationsquelleAutor nitin handa

Vous devez vous connecter pour publier un commentaire.