Vertically Aligning Text In Image (Gd)

[thecommonthread]

So I have a textarea in which the typed contents post to an external PHP file using AJAX that creates a PNG image from an existing 208 x 96 PNG image with my dynamic text from the textarea on top (using the existing image as a background). I want this dynamic text to vertically align in the middle, and I have had a ton of trouble with this.

 

First of all I should note that I needed the text horizontally centered too, but because the text needs to span multiple lines of text, I needed to use explode() for each line and tell each line to horizontally center so that my text isn't just a box of left-aligned text that is centered in the middle of the image. Here's a visual example to explain what I'm referring to:

 

 

 

I have no problem with the horizontal alignment of the text in my code, so essentially now to properly vertically align my text in the middle, in theory I need to subtract half the total height of all the lines together from half the height of the image (which is 48 px, half of 96 px) to get my starting Y coordinate for the first line of text and then just add the line height to each additional line to flow out underneath each other sequentially. My theory is not working for me; I just can't find the solution to get it right in the middle. Unfortunately for me, this vertical centering has to be dynamic because there is a user option to select from different fonts and font sizes.

 

I also happened to notice that when the starting Y coordinate is zero, all you can see are any tails from lowercase letters that hang down below the normal letters (like y's and p's and g's). In this dynamically created image, the textarea has the words "Example text" typed into it. In the outputted image, all you can see is the "p" hanging down into the image:

 

 

 

And when the starting Y coordinate is 96 (the height of the image), the outputted text ends up flush with the bottom of the image, with the "p" hanging below the image:

 

 

 

I bring this up because clearly something additionally that needs to be factored in is the fact that the Y coordinate is located at the bottom of the text, and also not underneath any "swooping under" lowercase letters (if that makes sense).

 

So I need a correct formula to create the right Y coordinate. I have a deadline approaching and any help with this would be very much appreciated. Thanks!

[Barand]

With imagestring() the y coord is the top left of the text.

 

With imagettftext() the y coord is the baseline of the text. But you have to allow for the descenders. Trouble is the font metrics aren't readily accessible so allow about a quarter to third of the bounding box height from imagettfbbox();

[thecommonthread]

Thanks for the reply. It looks like in imagestring(), I can't specify a font size, which is something that I do need, so unfortunately I am still stuck using imagettftext().

 

To get a good line height, I am using imagettfbbox() with the user-selected font and font size with a few characters in it like W, f, and j to give the bounding box a chance to calculate just how tall a line could be at it's maximum. This seems to be working pretty well for spacing my lines apart from each other.

 

To incorporate the baseline Y starting coordinate from the imagettftext(), I can basically do the same thing with the imagettfbox(), just have it calculate the height of a capital letter to determine the height from the top to the baseline of the text. But really, my formula is not working though at all before I even get to that point. I thought this would vertically align it, but it doesn't work:

 

$y = 48-(($maxtextlineheight*count($textline))/2); // (48 is half the height of the image, count($textline) is the number of total lines)

 

$y represents the starting Y coordinate for the first line of text, and then of course the additional lines will be $y + ($maxtextlineheight x line number).

 

Can anyone tell me the proper math that I need here?

Edited December 2, 2012 by thecommonthread

[thecommonthread]

I figured it out. In case this might help anyone, the solution that worked for me was:

 

 

$y = (($standardlineheight/2)+48) - (((count($textline)-1)*$maxtextlineheight)/2);

 

"Standard line height" is the height of the text from the top to the baseline, and the "maximum line height" is the height from the full top to the bottom of the text, which includes any descending lowercase letters.