How to account for font swash with PHP and GD

Question

I have the following code to print text on an image. I am also adding a debug box around the text. However, I noticed the text on the left lies outside of the box that PHP gives me with imagettfbbox.

This looks like an issue with the font swash. Is there anyway to account for this? Can I figure out the distance between the start of the swash and the actual position imagettfbbox gives to me?

I don't think this is an issue with the font, as I tried it with a few script style fonts and the results were similar.

<?php

$font       = 'scriptin.ttf';
$text       = 'Ipsum';
$size       = 30;
$image      = imagecreatetruecolor(200, 200);
$fontColour = imagecolorallocate($image, hexdec('11'), hexdec('11'), hexdec('11'));
$bgColour   = imagecolorallocate($image, hexdec('CC'), hexdec('CC'), hexdec('CC'));

imagefilledrectangle($image, 0, 0, 200, 200, $bgColour);

$dimensions = imagettfbbox($size, 0, $font, $text);
imagefilledrectangle(
    $image,
    $dimensions[0] + 40,
    $dimensions[7] + 50,
    $dimensions[2] + 40,
    $dimensions[3] + 50,
    imagecolorallocate($image, mt_rand(1, 180), mt_rand(1, 180), mt_rand(1, 180))
);

imagettftext(
    $image,
    $size,
    0,
    40,
    50,
    $fontColour,
    $font,
    $text
);

header('Content-Type: image/png');
imagepng($image);

The code and font is available here: https://github.com/AydinHassan/image-swash-example

If you point a VHOST at the repository, you can just hit swash.php

it looks like you've not placed the box coloring correctly: the amount of space "missing" on the left looks identical to the amount of space "too much" on the right. — Mike 'Pomax' Kamermans, Dec 04 '15 at 21:30
That's what I thought, but if I am, I can't see where I'm doing it wrong. I am using the information `imagettfbbox` is giving me. — Aydin Hassan, Dec 04 '15 at 21:38
http://php.net/manual/en/function.imagettfbbox.php#97211 suggests this is a known, if inconvenient, bug. — Mike 'Pomax' Kamermans, Dec 04 '15 at 22:35
@Mike'Pomax'Kamermans The baseline glitch/bug should only effect the height, not the width. — Daniel W., Dec 07 '15 at 10:36
Can you convert the font to an SVG and use it's dimensions instead? — OrderAndChaos, Dec 07 '15 at 11:54
This might help you, this is how glyphs are described: http://www.freetype.org/freetype2/docs/glyphs/glyphs-3.html — OrderAndChaos, Dec 07 '15 at 11:58
This library seems to be able to extract meta from fonts, you might find what you need here: https://github.com/PhenX/php-font-lib — OrderAndChaos, Dec 07 '15 at 12:24

timclutton · Accepted Answer · 2016-10-14T08:01:57.877

Edit: This appears to be fixed in PHP 7.0.12 (bug #53504) so the code below shouldn't be required.

Based on a comment in the PHP manual I've written the following function to calculate and return the difference between where GD thinks the left side of the bounding box is and where the leftmost pixel is found:

function xadjust($size, $angle, $fontfile, $text)
{
    $bbox = imagettfbbox($size, $angle, $fontfile, $text);

    $width = $bbox[4] - $bbox[6]; // upper right x - upper left x;
    $height = $bbox[1] - $bbox[7]; // lower left y - upper left y;

    // create an image with height and width doubled to fit any 'swash'.
    $im = imagecreatetruecolor($width * 2, $height * 2);

    // set background color to opaque black.
    imagefill($im, 0, 0, 0x00000000);

    // draw the text in opaque white.
    imagettftext(
        $im,
        $size,
        0,
        $width / 2,
        $height,
        0x00ffffff,
        $fontfile,
        $text
    );

    // set the min-width to its possible maximum.
    $min_x = $width * 2;

    for ($x = 0; $x < $width * 2; $x++) {
        // each x-pixel (horizontal)
        for ($y = 0; $y < $height * 2; $y++) {
            // each y-pixel (vertical)
            if (imagecolorat($im, $x, $y) > 0) {
                // non-black pixel found!
                $min_x = min($x, $min_x);
            }
        }
    }

    imagedestroy($im);

    // return the difference between where GD thinks the bounding box is and
    // where we found the leftmost non-black pixel.
    return (($width / 2) - $min_x) - abs($bbox[0]);
}

This can be integrated to your script fairly easily:

$font       = 'scriptin.ttf';
$text       = 'Ipsum';
$size       = 30;
$image      = imagecreatetruecolor(200, 200);
$fontColour = imagecolorallocate($image, hexdec('11'), hexdec('11'), hexdec('11'));
$bgColour   = imagecolorallocate($image, hexdec('CC'), hexdec('CC'), hexdec('CC'));

imagefilledrectangle($image, 0, 0, 200, 200, $bgColour);

$xadjust = xadjust($size, 0, $font, $text); // 1. get the adjust value.

$dimensions = imagettfbbox($size, 0, $font, $text);
imagefilledrectangle(
    $image,
    $dimensions[0] + 40 - $xadjust, // 2. move the left-side of the box to the left.
    $dimensions[7] + 50,
    $dimensions[2] + 40 - $xadjust, // 3. move the right-side of the box to the left.
    $dimensions[3] + 50,
    imagecolorallocate($image, mt_rand(1, 180), mt_rand(1, 180), mt_rand(1, 180))
);

imagettftext(
    $image,
    $size,
    0,
    40,
    50,
    $fontColour,
    $font,
    $text
);

header('Content-Type: image/png');
imagepng($image);

This gives me the following output:

I've run it with a few other fonts and sizes and it seems to be accurate to within 1 pixel.

I ended up with something similar. Except I counted backwards, which shaved a lot of time off for large images. I also ran a preliminary check, running rendering the text in a temporary image and checking if there was any pixels in the first column. I needed these optimisations as we will be bulk rendering these images. Thanks! — Aydin Hassan, Dec 09 '15 at 11:05

How to account for font swash with PHP and GD

1 Answers1

Linked