Center text vertically in image in PHP not working

[newsoft]

Hey 

 

I have a simple function to center text in an image. It's centered horizontally but not vertically. This is my code for centering vertically:

 

$max_text_box_height = max(array($text_box_d[1],$text_box_d[3],$text_box_d[5],$text_box_d[7]));

$min_text_box_height = min(array($text_box_d[1],$text_box_d[3],$text_box_d[5],$text_box_d[7]));

$text_box_height = abs($max_text_box_height) - abs($min_text_box_height);

This has been driving me crazy for a full day  I have tried nearly all the combinations of coordinates with and without absolute with no avail.

 

Thanks in advance

Regards

Michael

[ginerjm]

Do you really think WE can figure out what YOU are doing with this code?  What do the values you are supplying represent?  And what do you do with the value you arrive at?  More importantly, once you have this "height" value, how do you decide where to place the element?

 

So much missing...

[newsoft]

Sorry I missed the main function  :

$text_box_d = imagettfbbox('30', 0, 'arial.ttf', 'hello world');
$max_text_box_height = max(array($text_box_d[1],$text_box_d[3],$text_box_d[5],$text_box_d[7]));
$min_text_box_height = min(array($text_box_d[1],$text_box_d[3],$text_box_d[5],$text_box_d[7]));
$text_box_height = abs($max_text_box_height) - abs($min_text_box_height);

When I have the height, I use the height from the image height and divide by 2 to center the text vertically. The problem is calculating the height of the outbounding box correctly.

[ginerjm]

What is the outbounding box?  You have a set of image dims; you have the dims of the text box from above.  What is this 'outbounding box'?

 

It would seem that the height of your text box is simply index 7 less index 1 since you have a square text box (angle=0?).  Then you have the vertical midpoint of your image already, so half of the text box height from that midpoint is the starting point for your text box, no?  I've never done this but from reading the manual just now, it seems simple.

 

Can you show us more of your code, specifically how you display the text?

Edited May 19, 2014 by ginerjm

[Barand]

$im = imagecreate(200,100);

$str = 'Barand';

$bg = imagecolorallocate($im, 0,0,0);

$col= imagecolorallocate($im, 0xFF, 0xFF, 0xFF);

$yel = imagecolorallocate($im, 0xFF, 0xFF, 0);


// get height and width of text

$box = imagettfbbox(50,0,'calibri.ttf',$str);

$textht = $box[7] - $box[1];

$textwd = $box[2] - $box[0];


$x = (imagesx($im) - $textwd) / 2;

$y = (imagesy($im) - $textht) / 2;


imagettftext($im, 50, 0, $x, $y, $col, 'calibri.ttf', $str);


// show bounding box

imagerectangle($im, $x, $y, $x+$textwd, $y+$textht, $yel);


// output

header("Content-type: image/png");

imagepng($im);

imagedestroy($im);

[newsoft]

Hey ginerjm

 

Outbounding box is the imaginary box that holds the text. It's what is used to determine the coordinates of the text box.

 

Unlike width, the height of the text is not simply $text_box_d[7] - $text_box_d[1] because the Y coordinates gets the height from the top of the image to the baseline of the text not to the top of the outbounding box.

 

This is the function used to print the text:

$x_co = ($imgWidth - $text_box_width) / 2;
$y_co = ($imgHeight - $text_box_height) / 2;
imagettftext($img, $font_size, 0, $x_co, $y_co, $text_color, $font, $string);

Width is calculated by getting the difference between $text_box_d['2'] and $text_box_d['0'] but the coordinates of the Y axis used for the height leads the text getting pushed upward not centered vertically due to, as stated above, the height is calculated from top of page to baseline of letters not the bounding box (top) of the letters

 

Thanks

Edited May 19, 2014 by newsoft

[newsoft]

Hey Barand

 

Although imagerectangle would be a good fix, it wouldn't work in my situation as the image is actually a picture so having text with borders wouldn't look good.

 

If I could have the borders of the rectangle to be transparent, it would work. If the image had a solid  color background, I could give the borders the same color and so they would blend together but that's not my case.

 

Is there a way to hide the borders of the imagerectangle or make them transparent?

 

Thanks

[Barand]

Just remove the line that draws the rectangle. I only put it in there to demonstrate what/where the bounding box was.

[newsoft]

Hey Barand

 

Unfortunately these coordinates aren't working for height. That's actually the problem. Take a look:

http://ahpromote.us/status.php?id=1&t=1

[newsoft]

The box is centered well but the text is not

[Barand]

Well, you omitted to mention that you were trying to output multi-line text. Find the bounding box and find the height of a single line. The text output should start a single lineheight below the top of the bounding box.

 

Note that this is approximate. To do it accurately you would need font metrics and use the ascent, descent and leading values.

$im = imagecreate(200,200);
$str = "Barand\nBarand";

$bg = imagecolorallocate($im, 0,0,0);
$col= imagecolorallocate($im, 0xFF, 0xFF, 0xFF);
$yel = imagecolorallocate($im, 0xFF, 0xFF, 0);

// get height and width of text
$box = imagettfbbox(50,0,'calibri.ttf',$str);
$textht = $box[7] - $box[1];
$textwd = $box[2] - $box[0];

// get ht of  a single line
$box2 = imagettfbbox(50,0,'calibri.ttf','X');
$lineht = $box2[7] - $box2[1];

$x = (imagesx($im) - $textwd) / 2;
$y = (imagesy($im) - $textht) / 2;
// first baseline is top of box - singlw line height
$y1 = $y + $textht - $lineht;

imagettftext($im, 50, 0, $x, $y1, $col, 'calibri.ttf', $str);

// show bounding box
imagerectangle($im, $x, $y, $x+$textwd, $y+$textht, $yel);

// output
header("Content-type: image/png");
imagepng($im);
imagedestroy($im);

[newsoft]

Although not extremely accurate but very precise. Thanks very much Barand for your time