imgettfbox boundaries not lining up correctly

mendingo

I'm having issues with text lining up where it should. Every tutorial I can find tells me to use imagettfbox to find the dimensions of the text. I do this, but the text doesn't fit within those dimensions.

See the example below:

<?php
// Create image and colours
$im = imagecreatetruecolor(200, 100);
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
$red = imagecolorallocate($im, 255, 0, 0);

//Set the background to be white
imagefilledrectangle($im, 0, 0, 200, 100, $white);

//font file
$font = "ARIAL.TTF";

//set sample text and fontsize
$text="102";
$size = 25;

//calculate height and width of text1
$bbox = imagettfbbox($size, 0, $font, $text);
$width = $bbox[2] - $bbox[0];
$height = $bbox[5] - $bbox[3];

//draw rectangle that should house the text
imagefilledrectangle($im, 50, 40, 50+$width, 40+$height, $red);
//draw text at same startpoint as rectangle
imagettftext($im, $size, 0, 50, 40, $black, $font, $text);

// Output to browser
header('Content-type: image/png');

imagepng($im);
imagedestroy($im);
?>

This should output a red rectangle, containing the text. It doesn't - the text is slightly to the right of where it should be. This only happens with some strings - ones that contain a "1" tend not to work, while some others work perfectly. Here is the output for 2 strings:
[ATTACH=CONFIG]5399[/ATTACH]
The top (red) one works as it should, the string is entirely within the bounding box, but the bottom (green) one doesn't - it's offset to the right.

Does anyone know what is happening, and what I need to do to make the text fit correctly within the bounding box? I've tested this with multiple fonts, including monospace fonts - the same thing always happens.

hWb9p.png

NogDog

I think there may be some letters in some fonts that have something akin to negative margins for stylistic reasons, which can mess this calculation up. I don't know if there's some way to work around in in this context or not. (And for that matter, I don't know for sure if this is your issue.) I don't suppose you could just punt, so to speak, and make the box a bit bigger with more padding, so it's not so obvious? 🙂

I think I used that function a few years ago to create customized Kindle screensaver images, so if I remember, I'll look at that code tonight and see if I did anything different -- but I likely was concerned with being off by a couple pixels.

NogDog

Interesting coincidence: this just showed up in my Twitter feed: 🙂

mendingo

Hi. Thanks for the reply. I'm not sure if the negative widths is the cause of this - it seems odd that I can't find anyone else having these issues. I've been investigating all day and have found a workaround.
The offset to the right only happens when the string starts with certain characters - "1" is one of the culprits. If the string starts with a space, then the dimensions are always correct.
So I used imagettfbbox to calculate the width of the string with a leading space, then calculate the space individually, and subtracted it. This gave me the bound box all the way to the right edge, although the start was still shifted to the right. Subtracting this width from the original width gave me exactly how many pixels the text had been shifted, meaning I was able to compensate for this issue when drawing the string.

The code below correctly places every string within the bounding box. It's a messy workaround, but it works.

<?php
// Create image and colours
$im = imagecreatetruecolor(200, 100);
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
$red = imagecolorallocate($im, 255, 0, 0);

//Set the background to be white
imagefilledrectangle($im, 0, 0, 200, 100, $white);

//font file
$font = "ARIAL.TTF";

//set sample text and fontsize
$text="102";
$size = 25;

//calculate height and width of text
$bbox = imagettfbbox($size, 0, $font, $text);
$width = $bbox[2] - $bbox[0];
$height = $bbox[5] - $bbox[3];

//calculate the width of the text with a leading space
$bbox2 = imagettfbbox($size, 0, $font, " ".$text);
$width2 = $bbox2[2] - $bbox2[0];

//calculate the width of a space by itself
$bbox3 = imagettfbbox($size, 0, $font, " ");
$width3 = $bbox3[2] - $bbox3[0];

//subtract space from long string
$newwidth = $width2 - $width3;

//subtract the new width from the original to get the offset
$offset = $newwidth-$width;

//draw rectangle that should house the text
imagefilledrectangle($im, 50, 40, 50+$width, 40+$height, $red);
//draw text at same startpoint as rectangle - adding the offset to the x coordinate
imagettftext($im, $size, 0, 50-$offset, 40, $black, $font, $text);

// Output to browser
header('Content-type: image/png');

imagepng($im);
imagedestroy($im);
?>

mendingo

Hi. Thanks for the reply. I'm not sure if the negative widths is the cause of this or not- it seems odd that I can't find anyone else having these issues. I've been experimenting all day and have found a workaround.
The offset to the right only happens when the string starts with certain characters - "1" is one of the culprits. If the string starts with a space, then the dimensions are always correct, in every font, but if it starts with a "1", then the offset happens in 90% of the fonts I've tried.

So I used imagettfbbox to calculate the width of the string with a leading space, then calculate the space individually, and subtracted it. This gave me the bound box all the way to the right-hand edge, although the start was still shifted to the right. Subtracting this width from the original width gave me exactly how many pixels the text had been shifted, meaning I was able to compensate for this issue when drawing the string.

The code below correctly places every string within the bounding box. It's a messy workaround, but it works.

<?php
// Create image and colours
$im = imagecreatetruecolor(200, 100);
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
$red = imagecolorallocate($im, 255, 0, 0);

//Set the background to be white
imagefilledrectangle($im, 0, 0, 200, 100, $white);

//font file
$font = "ARIAL.TTF";

//set sample text and fontsize
$text="102";
$size = 25;

//calculate height and width of text
$bbox = imagettfbbox($size, 0, $font, $text);
$width = $bbox[2] - $bbox[0];
$height = $bbox[5] - $bbox[3];

//calculate the width of the text with a leading space
$bbox2 = imagettfbbox($size, 0, $font, " ".$text);
$width2 = $bbox2[2] - $bbox2[0];

//calculate the width of a space by itself
$bbox3 = imagettfbbox($size, 0, $font, " ");
$width3 = $bbox3[2] - $bbox3[0];

//subtract space from long string
$newwidth = $width2 - $width3;

//subtract the new width from the original to get the offset
$offset = $newwidth-$width;

//draw rectangle that should house the text
imagefilledrectangle($im, 50, 40, 50+$width, 40+$height, $red);
//draw text at same startpoint as rectangle - adding the offset to the x coordinate
imagettftext($im, $size, 0, 50-$offset, 40, $black, $font, $text);

// Output to browser
header('Content-type: image/png');

imagepng($im);
imagedestroy($im);
?>

NogDog

I wonder if it's something to do with most fonts making digits act as if they're mono-spaced, so that they line up nicely when in columns? (Doesn't help any, just stating my curiosity -- glad you at least found a work-around. 🙂 )

mendingo

I don't think it is that, because the issue persists even for monospaced fonts. I just don't get why there is nothing online about this. I can't be the only one experiencing it.

NogDog

FWIW, I don't see anything in the code I wrote that does anything "interesting". But like I said, I was just generally making sure the submitted text would fit within the image -- there was no edge case testing to see what happened when you tried different letter combinations with strings that were right at the limit as to what would fit within the image. :bemused: