?
Solved

imagettfbbox & imagettftext

Posted on 2012-08-21
25
Medium Priority
?
628 Views
Last Modified: 2012-08-24
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
0
Comment
Question by:Gary
  • 14
  • 11
25 Comments
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 38319009
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.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_9849-Making-CAPTCHA-Friendlier-with-PHP-Image-Manipulation.html

best regards, ~Ray
0
 
LVL 58

Author Comment

by:Gary
ID: 38320539
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.
0
 
LVL 58

Author Comment

by:Gary
ID: 38321142
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
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 111

Expert Comment

by:Ray Paseur
ID: 38321943
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

0
 
LVL 58

Author Comment

by:Gary
ID: 38322193
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
0
 
LVL 58

Author Comment

by:Gary
ID: 38322245
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
0
 
LVL 58

Author Comment

by:Gary
ID: 38322275
This may show it better
ttf2.jpg
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 38322726
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.
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 38322741
<?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?
0
 
LVL 58

Author Comment

by:Gary
ID: 38322772
Try it with several dates as in the screenshot
Tues 14
Tues 21
Wed 08

And see if they line up.
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 38322787
What would the URL be to make that test?
0
 
LVL 58

Author Comment

by:Gary
ID: 38322799
You'll need to make a normal page with three images using the file you have as the source passing in the date.
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 38322861
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.
0
 
LVL 58

Author Comment

by:Gary
ID: 38322881
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.
0
 
LVL 58

Author Comment

by:Gary
ID: 38322894
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.
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 38324327
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
0
 
LVL 58

Author Comment

by:Gary
ID: 38325472
The 4, 1 and 8 should all be right aligned and they're not, they move further away from the edge of the image
0
 
LVL 111

Accepted Solution

by:
Ray Paseur earned 2000 total points
ID: 38326987
I think that is only a matter of kerning.
http://en.wikipedia.org/wiki/Kerning

When you rearrange the numbers they still seem to be lined up correctly.  If all of them ended in the same sequence of characters they would probably not exhibit any kerning variation.  The point here is that the 8 is wider than the 1 and so it takes up more space, making it look like the 8 and the 1 are not lined up.  But from a typography point of view, they are lined up correctly.
screenshot-2-garyc123.png
0
 
LVL 58

Author Comment

by:Gary
ID: 38327136
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.
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 38327943
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

0
 
LVL 58

Author Comment

by:Gary
ID: 38329436
So no way around it, I can live with how it looks
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 38329786
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
0
 
LVL 58

Author Comment

by:Gary
ID: 38329824
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.
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 38329882
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
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

These days socially coordinated efforts have turned into a critical requirement for enterprises.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses
Course of the Month16 days, 18 hours left to enroll

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question