sad cow

web design, jQuery plugins, web tools and general stuff about the internet by matt squirrell.
not exactly unique but hopefully better...

RSS Feed

Using PHP for custom-font titles

Sometimes you want to use a font that's not exactly web safe - that is, about 0% of visitors to your site will have it installed on their PC, so no-one will see it. PHP can help!

First, get your font - I like to use dafont.com. Then upload it into the 'fonts' directory on your server, which you can find by doing a lazy old
locate .ttf
The command
fc-list
will show the installed fonts to make sure it worked okay.

Once there, go for something like the following code, which I've commented to buggery:
function customText($text) {

    //variables

    $image_directory = "/var/www/mysite/images/gen/";

    $font = "Harabara.ttf";

    $fontsize = 72;



    //lets check to see if we've already rendered the image before we start:

    $file = str_replace(" ", "_", trim($text));

    if (file_exists($image_directory.$file)) {

        return $file;

    }



    //create image to hold the text

    $im = imagecreatetruecolor(770, 78);



    //work out the size of the text so we can center it

    $finalsize = imagettfbbox($fontsize, 0, $font, $text);

    $width = $finalsize[2] - $finalsize[0]; //that's lower-right corner X position - lower-left corner X position

    $startx = round(770 / 2) - round($width / 2); //obviously, to center we need half of the width of the whole image

    $height = $finalsize[1] - $finalsize[6]; //that's lower-left corner Y position - upper-left corner Y position

    $starty = 78 - $fontsize;



    $fontcolor = imagecolorallocate($im, 255, 255, 255); //set up a nice colour for the font - in this case, white

    imagesavealpha($im, true); // allow transparency

    $trans_colour = imagecolorallocatealpha($im, 135, 177, 191, 127); // the colour to be transparent - make it as close to the final background colour as you can to help antialiasing

    imagefill($im, 0, 0, $trans_colour); // fill our image with 'nothing'



    //here comes the text!

    imagettftext($im, $fontsize, 0, $startx, 78, $fontcolor, $font, $text);



    //turn the image into a .png and save. Make sure the directory is writable by apache

    imagepng($im, $image_directory.$file);



    //remove the image from the sever's memory

    imagedestroy($im);



    //done! Return the name

    return $file;

}

Easy, huh? The code that this page is a little more complicated, as it makes sure the title fits in the box I have. To do this, I replace the lines in the code above that set $finalsize and $width:
    //make sure the text fits in the box

    $fontsize ++;

    while ($width > 770) {

        $fontsize --;

        $finalsize = imagettfbbox($fontsize, 0, $font, $text);

        $width = $finalsize[2] - $finalsize[0]; //that's lower-right corner X position - lower-left corner X position

    }

Enjoy!

UPDATE: I've written a post about a Javascript method, too.

jQuery Best Length
:(

I am Matt Squirrell.

And this is the sort of thing I do.

I can design and build rich, feature-filled websites like this one. Ask me nicely and I might even do it with less than 700KB of images.

I started this website because I'm constantly coming up with neat little fixes, chunks of code, plugins or tricks, and then forgetting about them in a week. This is as much for me as it is for you (but it certainly is nice to share bits and pieces with other people).

It will also serve as a central point for all the other things I have done that have found their way to the Internet - from strange MMO God-sims to a 'Choose your own adventure' maker.

You are more than welcome to hire me if you've got your own web project you want to do - if you can think it I can pretty much make it. I'm cheaper than paying someone from the bargain basement to do it and then having to pay someone good to fix all the problems, too!

Anyway, until I think of a better way to sign off, I only hope you found something useful up there above ground.

Click on the cow ;o)

Contact me. If you like.

Valid XHTML 1.1