Как отобразить вертикальный текст (повернутый на 90 градусов) во всех браузерах?

Question

Как отобразить вертикальный текст (повернутый на 90 градусов) во всех браузерах?

_{(источник: sun.com )}

Answer 1

Проблема не зависит от языка на стороне сервера. Если это не проблема, когда вертикально отображаемый текст уже не текст, а изображение, выберите решение , предоставляемое tharkun . В противном случае, есть способы сделать это на уровне представления.

Во-первых, есть (на данный момент) решение только для IE, которое является частью стандарта CSS3 . Вы можете проверить это вживую .

p {
    writing-mode: tb-rl;
}

Текстовый модуль CSS3 также указывает некоторые свойства для ориентации текста .

Другие ребята делают это с SVG .

Answer 2

Я не думаю, что вы можете вращать текст с помощью 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 3

Я использую функцию ниже, если строки заголовка таблицы слишком длинные. Это очень полезно, потому что это просто в использовании, быстро и вам не нужно вычислять высоту и ширину текста. Эти 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'>";

}

Answer 4

Поворот текста также возможен в других браузерах.

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 5

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

нет эха

Answer 6

Используйте Raphaeljs Это работает на IE 6 также

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

Answer 7

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

Answer 8

Насколько я знаю, невозможно получить вертикальный текст с помощью CSS, поэтому это означает, что повернутый текст должен быть на изображении. С помощью интерфейса PHP * '1001 * очень просто сгенерировать выходной файл изображения.

Обратите внимание, что это означает использование одного сценария для создания изображения, а другого - для создания окружающей веб-страницы. В общем случае нельзя (встроенные данные: несмотря на URI), чтобы один скрипт создавал более одного компонента страницы.

Answer 9

imagettftext Нужно сделать трюк.

Answer 10

В этой теме предлагается, чтобы вы могли написать текст на изображение, а затем повернуть изображение.

Похоже, что это возможно с IE, но не с другими браузерами, поэтому это может быть одним из тех маленьких выигрышей для IE6 =)