asked on

imagettfbbox & imagettftext

I'm trying to place text rotated 90 degrees onto an image, placing one set of text at the top of the image and another at the bottom with few pixels margin for both, but I'm getting in a twist with calculations.

I have the image size
$im = imagecreatetruecolor(20, 200);

One text block
$bbox = imagettfbbox(10, 0, $font, "My Text");

Width of bounding box
$x = $bbox[4]+4;

And write text
imagettftext($im, 10, 90, 15, $x, $white, $font, "My Text");

Whilst most of the images seem to have the text positioned correctly a few are touching the top of the image

Ray Paseur

Please post the code sample. I have some time tomorrow to look at this. If you want to do some research on your own, this article might have some clues. It's not spot-on, but I've used some of the imagettf() functions and can probably find examples that will work for you.
https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_9849-Making-CAPTCHA-Friendlier-with-PHP-Image-Manipulation.html

best regards, ~Ray

Gary

ASKER

Code is above, thats about all there is to it except for a few minor details.
I'm thinking because the text is rotated the bounding box is a bit smaller - will test shortly.

Gary

ASKER

No thats not it - some of the text is still out by 1 to 3 pixels.
It's nothing to do with a captcha and couldn't find any mention of imagettfbbox on that link.
It's just a simple coloured box with text at the bottom and the top (rotated 90 degrees) - the bottom text is fine as its just a simple indent of a few pixels, it's the measurement for the text at the top

Ray Paseur

Please see http://www.laprbass.com/RAY_temp_garyc123.php

That's why I need to see the actual code. I will be glad to work from your code base, but I can't guess what you want in the undefined variables.

<?php // RAY_temp_GaryC123.php
error_reporting(E_ALL);

// COPIED FROM THE POST AT EE
// I have the image size
$im = imagecreatetruecolor(20, 200);

// One text block
$bbox = imagettfbbox(10, 0, $font, "My Text");

// Width of bounding box
$x = $bbox[4]+4;

// And write text
imagettftext($im, 10, 90, 15, $x, $white, $font, "My Text");

Open in new window

Gary

ASKER

The undefined variables are just the font name and colour, but here is the complete code.

$height=$_GET['height'];
$font = 'ARIALBD.TTF';

if($height<90){$height=90;}

$im = imagecreatetruecolor(20, $height);

$blue = imagecolorallocate($im, 95, 133, 255);
$white = imagecolorallocate($im, 255, 255, 255);
$yellow = imagecolorallocate($im, 246, 255, 0);

imagefilledrectangle($im, 0, 0, 20,$height, $blue);

$bbox = imagettfbbox(10, 90, $font, $_GET['date']);
$x = $bbox[3];

$x=$x * -1;

imagettftext($im, 12, 90, 16, $height-3, $yellow, $font, $_GET['name']);

imagettftext($im, 10, 90, 15, $x, $white, $font, $_GET['date']);

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

Open in new window

This is my amended code getting the height of the bounding box with the text rotated

P.S. Your link isnt working

Ahh I follow you $font can be any font you have on the server locally, the bounding box is supposed to work with TTF fonts

Gary

ASKER

Attached a screenshot so you can see what I mean, notice 17/21/22 all line up and 16/18/19/20 line up as well but they should all line up together.
ttf.jpg

Gary

ASKER

This may show it better
ttf2.jpg

Ray Paseur

P.S. Your link isnt working

Exactly. All I had to work with was the code you posted, so I installed it. I'll try again with the revised code from the most recent snippet.

Ray Paseur

<?php // RAY_temp_GaryC123.php
error_reporting(E_ALL);

// COPIED FROM THE POST AT EE
$height=$_GET['height'];

// THIS IS OVERRIDDEN
$font = 'ARIALBD.TTF';
$font = 'fonts/verdana.ttf';

if($height<90){$height=90;}

$im = imagecreatetruecolor(20, $height);

$blue = imagecolorallocate($im, 95, 133, 255);
$white = imagecolorallocate($im, 255, 255, 255);
$yellow = imagecolorallocate($im, 246, 255, 0);

imagefilledrectangle($im, 0, 0, 20,$height, $blue);

$bbox = imagettfbbox(10, 90, $font, $_GET['date']);
$x = $bbox[3];

$x=$x * -1;

imagettftext($im, 12, 90, 16, $height-3, $yellow, $font, $_GET['name']);

imagettftext($im, 10, 90, 15, $x, $white, $font, $_GET['date']);

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

Open in new window

Rendered here:
http://www.laprbass.com/RAY_temp_garyc123.php?height=90&date=123&name=Gary

What should this do differently?

Gary

ASKER

Try it with several dates as in the screenshot
Tues 14
Tues 21
Wed 08

And see if they line up.

Ray Paseur

What would the URL be to make that test?

Gary

ASKER

You'll need to make a normal page with three images using the file you have as the source passing in the date.

Gary

ASKER

Ray Paseur

I get this.
http://www.laprbass.com/RAY_temp_garyc123.html

<?php // RAY_temp_GaryC123.html
error_reporting(E_ALL);

// COPIED FROM THE POST AT EE
?><img src="http://www.laprbass.com/RAY_temp_garyc123.php?height=90&date=Tues 14&name=Gary">
<img src="http://www.laprbass.com/RAY_temp_garyc123.php?height=90&date=Tues 21&name=Gary">
<img src="http://www.laprbass.com/RAY_temp_garyc123.php?height=90&date=Wed 08&name=Gary">

Open in new window

What is the objective here? It looks like "Gary" and the textual date run together, but I think that may be remedied by making the height larger. Or the font smaller.

Gary

ASKER

Notice the right (top) of the date is misaligned.
By using the bounding box it should give you the width of the text so that you can then align them correctly.
So its maybe 43 or 44 or 45 pixels or whatever, so then I can say move the text down that many pixels. But its not working that way.

Gary

ASKER

See in the Gary block I set the position as the height - 3 px, they align perfect, same should be true for the date part if the length of the text was correct.

Ray Paseur

I'm just not getting it. Please help me deconstruct this problem so I can understand your concern. Here is my latest, using a height of 120. This looks "ok" to me and I don't know what looks misaligned to you. Maybe you can use a screen capture and draw some red lines on it to show what you want?
http://www.laprbass.com/RAY_temp_garyc123.html
screenshot-garyc123.png

Gary

ASKER

The 4, 1 and 8 should all be right aligned and they're not, they move further away from the edge of the image

ASKER CERTIFIED SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Gary

ASKER

So how have you got them lined up?
I thought of the point of the bounding box was that it only measured the space occupied by the letters so
wwww
eeee
Same characters but the e's take up less space and so less pixels, when I checked the measurements of the bounding box it was coming up with different figures for the different dates.

Ray Paseur

Apparently that's now how it works. Each letter seems to be centered. The kern changes the spacing.
http://www.laprbass.com/RAY_temp_garyc123.html

<?php // RAY_temp_GaryC123.html
error_reporting(E_ALL);

// MODIFIED FROM THE POST AT EE
?>
<img src="http://www.laprbass.com/RAY_temp_garyc123.php?height=120&name=Y&date=eeee">
<img src="http://www.laprbass.com/RAY_temp_garyc123.php?height=120&name=X&date=wwww">
<img src="http://www.laprbass.com/RAY_temp_garyc123.php?height=120&name=Z&date=foo">

Open in new window

Gary

ASKER

So no way around it, I can live with how it looks

Ray Paseur

Thanks for the points -- it's a great question.

You might try a unispace font like Courier. I don't have it installed on my machines or I would have tried it. Try the link at LAPRBass.com again - I made a little more of a test and I am now ever more confident that the kerning is the entire issue.

Best regards, ~Ray

Gary

ASKER

May do, but I can live with the difference of a few pixels.
Maybe in a future release they will come up with a fix for it - closest solution I found was for horizontal text but then the width is not the same when you rotate the text.
Thanks for the help.

Ray Paseur

I don't think there will be a future release that "fixes" kerning - it's kind of a central issue in typography. The only thing that doesn't get variable kerns is a unispace font. But anyway, best of luck with it, ~Ray

imagettfbbox &amp; imagettftext

imagettfbbox & imagettftext