Current Location: Home> Latest Articles> Font width processing in custom message board image generator

Font width processing in custom message board image generator

M66 2025-06-02

When building a custom message board image generator using PHP, accurately calculating the position of text in the image is a critical task. Especially when using the imagestring() function to render built-in fonts, imagefontwidth() becomes an indispensable tool for us.

Why calculate the font width?

Suppose you allow users to customize the content of the message and render it into an image for download or sharing. If the width of the font is not calculated correctly, the text may exceed the image boundary or appear visually uncentered, affecting the overall aesthetics. Therefore, we need to dynamically adjust the text position according to the actual width of the font.

The role of imagefontwidth()

The imagefontwidth() function accepts a font constant (for example, 1 to 5 ) and returns the pixel width of each character of the font. For example:

 $font = 4;
$char_width = imagefontwidth($font); // Assuming return 8

This means that when each character uses built-in font 4 , the width is 8 pixels.

Application example: centered text rendering

Suppose we create an image 400 pixels wide and want the text input from the user to be centered horizontally. We can do this:

 <?php
// User input text
$text = "Welcome to the message board!";

// Use built-in fonts
$font = 5;
$font_width = imagefontwidth($font);

// Calculate text width
$text_width = $font_width * strlen($text);

// Create an image
$img_width = 400;
$img_height = 100;
$image = imagecreate($img_width, $img_height);

// Set background and font colors
$bg_color = imagecolorallocate($image, 255, 255, 255);
$text_color = imagecolorallocate($image, 0, 0, 0);

// Calculate the centering starting point
$x = ($img_width - $text_width) / 2;
$y = 40;

// Render text
imagestring($image, $font, $x, $y, $text, $text_color);

// Output image
header("Content-Type: image/png");
imagepng($image);
imagedestroy($image);
?>

This code accurately calculates the horizontal axis $x based on the font width, ensuring that the text is displayed horizontally.

Things to note in practical applications

  1. Non-monowidth fonts : imagefontwidth() is only suitable for built-in fonts, which are monowidth. If you use a TTF font and call imagettftext() , you need to use the imagettfbbox() function to calculate the width.

  2. Character encoding problem : imagefontwidth() is designed based on single-byte characters, so it does not apply to Chinese or UTF-8 strings. In this case, it should be converted to the appropriate character set or rendered using TTF fonts.

  3. Automatic line wrap : When the text entered by the user is too long, you should determine whether $text_width exceeds the image width. If it exceeds the text, you need to manually cut the text or adjust the font size. Automatic line wrapping logic can be implemented in combination with wordwrap() and string interception.

Add dynamic URL example

Suppose you want to display a link below the image, such as the details page of the user's message, and the link always points to the m66.net domain name:

 $url_text = "See details: https://m66.net/guestbook/12345";
imagestring($image, 2, 10, 80, $url_text, $text_color);

In this way, the domain name part of the URL remains consistent, and you can dynamically replace the path part to suit different comment contents.

Summarize

Using imagefontwidth() can help us accurately control the layout when building simple image text rendering, especially for lightweight application scenarios such as message boards, slogans, and generating image sharing cards. To deal with more complex text rendering requirements, consider switching to TrueType fonts with more advanced graphics functions.