Writing vertical text (PHP or CSS)

Ever had the need to write vertical text? No? Someday, perhaps, you will. I had that need not long ago and as usual I did what everyone else does. Googled it. And so I found a couple of solutions. And now I’m putting it all together for your entertainment. Of course I will mention my sources at the end of this article. If I should find more solutions I will edit and update this article.

Here we go.

With PHP (option 1):

<?php

function verticaltext($string)
{
       $tlen = strlen($string);
       for($i=0;$i<$tlen;$i++)
       {
            $vtext .= substr($string,$i,1)."<br />";  
       }
       return $vtext;
}
//USAGE
echo verticaltext("My text will be vertical");

?>

With PHP (option 2 – using GDlib):

<?php


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

?>

With CSS:

<style>

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

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

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

/*IE*/
writing-mode: tb-rl;
filter: flipV flipH;

</style>

Source: StackOverFlow – http://stackoverflow.com/questions/771378/php-how-to-display-vertical-text-90-degree-rotated-in-all-browsers

blog comments powered by Disqus