centering text in a dynamically created image

[HaLo2FrEeEk]

Hey, I got help with the code for a project I was doing yesterday, and I did it and it works perfectly:

 

 

These are live stats from my forum, taken from my database.  As you can see, it looks ok, as long as the values are pretty uniform, but when I get a board style that is only three characters long like this one:

 

 

Then It starts to look weird, does anyone know how I can center the text and the avatar within a certain area?  The max size for a username is 18 characters, the max length for theme is 11 characters, the shortest is 3, the post count, join date, and last visit date still need to be centered, but length doesn't really matter with those.  Also, the max size for the avatars are 100x100, the minimum is anything less than that.  I know I could get the width of the picture and do some math to figure out where to put it, right now, at full size, the x and y coordinates of the picture are: (45, 48), so that would be the maximum, but I can't figure out how I would calculate the location for things smaller than that.

 

I'm reposting this since it moved down the page and got no replies, only a few people looked at it.  Trust me folks, I've tried to figure this out on my own, and I'm stuck.

[HaLo2FrEeEk]

bump.  I'm sorry, but I'll keep bumping this until I get some help, I need it, and so far, this is the one place where a bunch of people gather that know a lot about this kind of stuff.

[php_joe]

If the words are text superimposed over an image you could just use an html tag, like <center>, to center it.

 

Otherwise, I think you'll have to take the width of the text area, divide it in half, and subtract half of the width of the text to find the best starting point.

 

Or, you could just align the text left.

[HaLo2FrEeEk]

Well, its dynamic text, so it could be anything, putting center tags will only print the center tags on the image itself, I figured out how to do the avatar:

 

$max_x = 29;

$max_y = 37;

$aviwidth = imagesx($avatarim);

$aviheight = imagesy($avatarim);

if($aviwidth < 100) {

  if($aviheight < 100) {

    $height_diff = 100 - $aviheight;

    }

  $width_diff = 100 - $aviwidth;

  }

$width_diff = $width_diff/2;

$height_diff = $height_diff/2;

$xcoord = $max_x - $width_diff;

$ycoord = $max_y - $height_diff;

imagecopymerge($im, $avatarim, $xcoord, $ycoord, 0, 0, $aviwidth, $aviheight, 100);

 

Its tricky, I know, but this will center the avatar within a range, the maximum being 100x100.  Since I knew how to get the width of the avatar, I could do this easily, but I don't know how to get the width of text when I'm using ttf fonts, its different.

[jcbarr]

Center it inside a div, that will take a user defined area and then center the text within that area.

[bwochinski]

I assume you're using the GD library to write the text over the image.

 

Check out this function specifically for determining text bounds using TTFs: http://us2.php.net/manual/en/function.imagettfbbox.php

And then you'll have to use some more tricky math, just like you did for the avatar, to center the text.

[HaLo2FrEeEk]

I throught about that earlier today, but didn't hink it would work, now that I think more, it might, it returns an array, in which two of the values are top-left x and top-right x, I could subtract top-right x from top-left x and get the width of the text, then do the same exact thing I did with the avatar.  Thank you, for some reason, these things come easier to me when I explain them to someone, as opposed to trying to see it in my head.

 

I'll keep you updated.

[HaLo2FrEeEk]

I did it, I decided not to center the text, but right align it (I centered it initially), it was simple, I started each line of text at the bottom left of a predefined box, and set all the coordinates in arrays so they could be easily accessed.  I then got the box for the text, subtracted top-right x from top-left x and bottom-left y from top-left y to get width and height respectively, then, to center it horizontally, I got the difference between the width of the predefined box (130) and subtracted the width of the text from it.  I then split the difference in half and added that number to the bottom-left x coordinate for that text.  For the height, I did the same to get the difference, divided by two, the subtracted it from the bottom-left y coordinate and it was done.  I just did this for all the text and that was it.  To right align it, I just skipped splitting the width difference in two once I had that, and added the total difference to the bottom-left x coordinate.  Simple, huh?

 

$coords_x = array(243, 243, 243, 243, 243, 29);
$coords_y = array(43, 72, 101, 130, 159, 37);

// Center username
$box_user = imagettfbbox(14, 0, './bonzai.ttf', $user);
$userwidth = $box_user[4] - $box_user[6];
$userheight = $box_user[1] - $box_user[7];
$user_w_diff = (130 - $userwidth);
$user_h_diff = ((25 - $userheight) / 2);
$user_x = ($coords_x[0] + $user_w_diff);
$user_y = ($coords_y[0] - $user_h_diff);
// End center username

// Center Avatar
$aviwidth = imagesx($avatarim);
$aviheight = imagesy($avatarim);
$avi_w_diff = ((100 - $aviwidth) / 2);
$avi_h_diff = ((100 - $aviheight) / 2);
$avi_x = ($coords_x[5] + $avi_w_diff);
$avi_y = ($coords_y[5] + $avi_h_diff);
// End center avatar