4

Our dev server was recently upgraded to PHP v5.2.13. With that upgrade we have found that our png images are having kerning (letter spacing) problems. We've tried numerous fonts and haven't found a solution yet.

We are creating images using the GD library and writing text to the images using font files and the imagettftext() or imagefttext() functions.

Has anyone else run into this? Am I misunderstanding something or should this be submitted to PHP as a bug? Are there any cool workarounds I haven't thought of yet?

Here's an example of the new and old tahoma bold. Other fonts (bold and non-bold) have the same problem. Some letters and numbers seem like they're off-center or something like that.

Bad - new PHP

Good - old PHP v5.2.11 (the words are slightly different because this is our dev server and the other one is the live server)

Zoe
  • 27,060
  • 21
  • 118
  • 148
Neil Neyman
  • 2,116
  • 16
  • 21
  • What's the output of `foreach(array('GD_VERSION', 'GD_EXTRA_VERSION','GD_BUNDLED') as $c) echo $c, ': ', constant($c), "\n";` on both versions of php? – VolkerK Apr 09 '10 at 19:35
  • GD_VERSION: 2.0.35 GD_EXTRA_VERSION: GD_BUNDLED: 1 Same on both servers. – Neil Neyman Apr 10 '10 at 02:19

2 Answers2

3

"Tracking" is a similar term for how tight or loose text is set. You might have better luck googling for that, such as this result.

cowbellemoo
  • 425
  • 2
  • 6
  • That's interesting. Thanks, I'll check it out. We have a lot of code and we're hoping not to have to replace hundreds of function calls, but there might not be any better choice at the moment. :-/ Certainly I'll add that as a search term on Monday when I return. – Neil Neyman Apr 10 '10 at 02:22
1

Kerning didn't work for us thanks to the font we used, so we had to put in manual kerning for specific letter combinations like AV, AW ...etc.

/**
 * This function lets you write a string with your own letter spacing ($t)
 * and kern specific letter combinations like AV
 * 
 * @param type $im An image resource, returned by one of the image creation functions
 * @param type $size The font size. Depending on your version of GD, this should be specified as the pixel size (GD1) or point size (GD2).
 * @param type $angle The angle in degrees, with 0 degrees being left-to-right reading text. Higher values represent a counter-clockwise rotation. For example, a value of 90 would result in bottom-to-top reading text.
 * @param type $t Letter Spacing
 * @param type $k Kerning Spacing
 * @param type $x The coordinates given by x and y will define the basepoint of the first character (roughly the lower-left corner of the character). This is different from the imagestring(), where x and y define the upper-left corner of the first character. For example, "top left" is 0, 0.
 * @param type $y The y-ordinate. This sets the position of the fonts baseline, not the very bottom of the character.
 * @param type $color The color index. Using the negative of a color index has the effect of turning off antialiasing. See imagecolorallocate().
 * @param type $font The path to the TrueType font you wish to use.
 * @param type $text Text to write/print to the image
 */
function ImageTTFTextWithSpacing($im, $size, $angle, $t, $k, $x, $y, $color, $font, $text) {
    $numchar = strlen($text);
    for($i = 0; $i < $numchar; $i++) {
        # Assign character
        $char[$i] = substr($text, $i, 1);

        //Top is wider than bottom of character
        $up = ['Y','V','W'];
        //Bottom is wider than top of character
        $down = ['A'];
        //From the second letter on
        if( $i > 0 && 
                //check whether we have TOP and BOTTOM type character 
                //next to each other so we need to adjust spacing
                ((in_array($char[$i], $up) && in_array($char[$i-1], $down)) || 
                (in_array($char[$i-1], $up) && in_array($char[$i], $down)) )) {
            $w -= $k;
        }

        # Write character
        imagettftext($im, $size, $angle, ($x + $w + ($i * $t)), $y, $color, $font, $char[$i]);

        # Get width of character
        $width = imagettfbbox($size, $angle, $font, $char[$i]);
        $w = $w + $width[2];
    }
}
ShQ
  • 756
  • 7
  • 10