Using PHP imageftbbox – adjust image size to font size output?

I’m using PHP imageftbbox to create some dates that are calculated and rendered as an image.

They currently render to an image block so my font size is largely irrelevant apart from for creating higher resolution results. The problem I have is that if I have for instance the result provide two different dates (say February and March) then the font sizes appear differently in my resulting page as obviously it’s expanding the March date to fill the box.

How can I make the sizing apply to what the font size actually spits out – so I can for instance have the same size font output no matter what the length of the content created?

    <?php
include 'deliverytimes.php';

$date = new DateTime();
$now = date("Y-m-d H:i:s");
$h = date("H:i:s"); 

$days = explode(",", $businessDaysToAdd);
if (count($days) > 1) {
      
    $two_weekdays_later_1 = strtotime(date("Y-m-d H:i:s", strtotime($now)) . " +" . $days[0] . " weekdays $h");
    $date_1 = new DateTime("@$two_weekdays_later_1"); 
    $formattedDeliveryDate_1 =  $date_1->format('jS M');
    $formattedDeliveryDate_3 =  $date_1->format('jS of F');
    
    $two_weekdays_later_2 = strtotime(date("Y-m-d H:i:s", strtotime($now)) . " +" . $days[1] . " weekdays $h");
    $date_2 = new DateTime("@$two_weekdays_later_2"); 
    $formattedDeliveryDate_2 =  $date_2->format('jS M.');
    $formattedDeliveryDate_4 =  $date_2->format('jS of F');   

    $formattedDeliveryDate1 = $formattedDeliveryDate_3;
    $formattedDeliveryDate2 = $formattedDeliveryDate_4;

    $formattedDeliveryDate = "If ordered today we estimate delivery to be approximately between " . $formattedDeliveryDate_1 . " and " . $formattedDeliveryDate_2;
} else {
    $h = date("H:i:s");   
    $two_weekdays_later = strtotime(date("Y-m-d H:i:s", strtotime($now)) . " +" . $businessDaysToAdd . " weekdays $h");
    $date = new DateTime("@$two_weekdays_later"); 
    $formattedDeliveryDate = "If ordered today we estimate delivery approximately by " . $date->format('l, jS M.');
}

$defaultOutput = 'main';
$textMobile = isset($_REQUEST['mobile']) ? $_REQUEST['mobile'] : $defaultOutput;

switch($textMobile) {
    case "main":
        $textToUse = $formattedDeliveryDate;
        break;
    case "p1":
        $textToUse = $formattedDeliveryDate1;        
        break;
    case "p2":
        $textToUse = $formattedDeliveryDate2;        
        break;
}

// Path to our font file
$font = './Inter-SemiBold.ttf';
$fontBold = './Inter-Bold.ttf';
$size = 24;
$size2 = 82;
$spacing = 0;
$bbox   = imageftbbox($size2, 0, $fontBold, $textToUse);
$width  = $bbox[2] - $bbox[6];
$height = $bbox[3] - $bbox[7];
$im    = imagecreatetruecolor($width, $height);
$xcoord = ($width - $bbox[4]) / 2;
imagealphablending($im, false);
imagesavealpha($im, true);
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
$grey = imagecolorallocate($im, 161, 161, 168);
$trans = imagecolorallocatealpha($im, 255, 255, 255, 127);
imagefilledrectangle($im, 0, 0, $width, $height, $trans);
//$red = imagecolorallocate($im, 239, 73, 52);

$defaultTextColour = 'white';
$textColour = isset($_REQUEST['colour']) ? $_REQUEST['colour'] : $defaultTextColour;

switch($textColour) {
    case "white":
        $textColourUse = $white;
        break;
    case "black":
        $textColourUse = $black;        
        break;
    case "grey":
        $textColourUse = $grey;        
        break;
}

// Write it
imagettftext($im, $size2, 0, -$bbox[6], -$bbox[7], $textColourUse, $fontBold, $textToUse);

// Output to browser
header('Content-Type: image/png');
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
imagepng($im);
imagedestroy($i'm);

My CSS is just

.phpimage2 {max-width:90%; display: block; margin:10px auto 5px auto}

Answer

From what I can see, given your code, is that you generate an image of which the width depends on the $textToUse variable. I tried your code, and this is what I get (half the original size):

My best guess is that you use these image in another page, where you have fixed the width at which these image are displayed. Since the March image is less wide than the February image, it will get stretched to the same width as the February image. The result you see on your page is probably something like this:

However, this is only a guess, because the code in your question doesn’t allow us to actually reproduce your problem. See also: How to create a Minimal, Reproducible Example.

What would a solution be? You could use CSS to scale the image: transform: scale(0.5);, this would allow you to reduce it to a fixed font size. This might not work on a responsive page, where the bounding box can vary a lot in size. It all depends on how the image is embedded in the page, and you haven’t told us.

Advertisement

Answer