- Drop me a line! Contact me here.
Truetype text in GD
Truetype text in GD
Typography is an important aspect of any graphic design, and it is important that the text in a dynamic image matchs the rest of the site it sits in. Fortunately GD and PHP give us several options for including fonts in images that are created on the fly.
One of these options is the ability to use the TrueType font file format to draw text. TrueType is format common amoung Windows PCs, and as Windows is a very common development platform for PHP websites it is handy to be able to use fonts that are native to the development machine. TrueType is not limited to Windows however, and fonts used on Windows computers for development can be rolled out in a Unix or Linux environment easily.
In order to use TrueType fonts in GD the version of PHP used must have support for the FreeType library compiled in when it is installed. We won't go into any depth about how to compile this library into PHP as that is a complicated process and not really within the scope of this article. Fortunately however the precompiled binary version of PHP already has this library in it, so if you have installed PHP from this version you should be able to use TrueType fonts without any problems.
As with any image created using GD the first step is to open a blank canvas to draw on, and assign some colours to the image so that we can see what we're drawing. In this case we also need to colour the background.
The next stage of creating some text in our dynamic image is choose a font file. Most TrueType fonts will work straight away. However, some older font files are not compiled as FreeType, they use an older specification that is not supported by the FreeType library. The only sure way to know if your choice of font will work properly is to try it out in a test script. There is a way to fix old fonts using the Microsoft Volt font compiler, see the links for a place to down it. Microsoft Volt is a free font tool, but you will need to join the Microsoft Volt Community Group to access it.
Actually drawing the text is a simple process. Using the imagettftext() function you can control most aspects of the font placing, such as size, angle, and colour.
Unlike ordinary text using the imagestring() function, the imagettftext() function obeys kerning rules defined in the font. Kerning is the process in which letters in text are placed closer or further away from the letter before depending what the two letters are. For example, if a letter 'e' follows a captial 'W' it is neatly tucked under the final stroke of the 'W' letter. This kerning procedure means you cannot simply calculate the width some text will be by multiplying the number of letters in the string by the font width. However, PHP gives us a function to help us work it out.
imagettfbbox() returns the size of bounding box that a string will fill. From this you can calculate the correct coordinates to place your string if you want to centre it, or place it at an angle.
imagettfbbox() returns an array of coordinates based on the text corner positions. To calculate the horizontal size we subtract the x position of the lower left corner from the x position of the top right corner, and similarly we subtract the lower left y position from the upper right y position to find the vertical size. Finally we use the absolute value because text placed at more than 180 degrees would be drawn backwards, and we don't want to have a negative value returned.
One of these options is the ability to use the TrueType font file format to draw text. TrueType is format common amoung Windows PCs, and as Windows is a very common development platform for PHP websites it is handy to be able to use fonts that are native to the development machine. TrueType is not limited to Windows however, and fonts used on Windows computers for development can be rolled out in a Unix or Linux environment easily.
In order to use TrueType fonts in GD the version of PHP used must have support for the FreeType library compiled in when it is installed. We won't go into any depth about how to compile this library into PHP as that is a complicated process and not really within the scope of this article. Fortunately however the precompiled binary version of PHP already has this library in it, so if you have installed PHP from this version you should be able to use TrueType fonts without any problems.
As with any image created using GD the first step is to open a blank canvas to draw on, and assign some colours to the image so that we can see what we're drawing. In this case we also need to colour the background.
<?php
$image = imagecreate(348,348);
$white = imageallocatecolor($image,255,255,255);
$black = imageallocatecolor($image,0,0,0);
$red = imageallocatecolor($image,255,0,0);
imagefill($image,0,0,$white);
?>
The next stage of creating some text in our dynamic image is choose a font file. Most TrueType fonts will work straight away. However, some older font files are not compiled as FreeType, they use an older specification that is not supported by the FreeType library. The only sure way to know if your choice of font will work properly is to try it out in a test script. There is a way to fix old fonts using the Microsoft Volt font compiler, see the links for a place to down it. Microsoft Volt is a free font tool, but you will need to join the Microsoft Volt Community Group to access it.
Actually drawing the text is a simple process. Using the imagettftext() function you can control most aspects of the font placing, such as size, angle, and colour.
<?php
$string = "This is some text..";
$font = "verdana.ttf";
imagettftext($image,10,0,20,20,$black,$font,$string);
?>
Unlike ordinary text using the imagestring() function, the imagettftext() function obeys kerning rules defined in the font. Kerning is the process in which letters in text are placed closer or further away from the letter before depending what the two letters are. For example, if a letter 'e' follows a captial 'W' it is neatly tucked under the final stroke of the 'W' letter. This kerning procedure means you cannot simply calculate the width some text will be by multiplying the number of letters in the string by the font width. However, PHP gives us a function to help us work it out.
imagettfbbox() returns the size of bounding box that a string will fill. From this you can calculate the correct coordinates to place your string if you want to centre it, or place it at an angle.
<?php
$string = "This is some text..";
$font = "verdana.ttf";
$bbox = imagettfbbox(10,0,$font,$string);
$x_size = abs($bbox[4] - $bbox[0]);
$y_size = abs($bbox[5] - $bbox[1]);
?>
imagettfbbox() returns an array of coordinates based on the text corner positions. To calculate the horizontal size we subtract the x position of the lower left corner from the x position of the top right corner, and similarly we subtract the lower left y position from the upper right y position to find the vertical size. Finally we use the absolute value because text placed at more than 180 degrees would be drawn backwards, and we don't want to have a negative value returned.
Comments
Comments are not currently being accepted for this article.
Sidebar
Published:
17/01/2007
Views:
2036
Author:
Chris Neale
Labels:
Print:
- © Ooer.com Chris Neale 2007
- PHPGD.com
- Powered by PHP
- Database by MySQL
- DB Queries: 7
- DB Time: 0.0141 seconds
