Dynamically Converting Text to an Image

Published: February 5th, 2009 by: Kurtis

As CSS expands, so does web design as a whole, but where it still lacks (and most likely will always lack) is in the area of fonts. Depending on the user's home computer and the actions he/she has taken on it, there are different fonts inherently available. In this article, however, we will talk about bypassing the user's system and use the fonts you would like, via PHP and the GD library.

SEO experts would say using images to replace text is a bad idea because crawlers cannot read the text on images to analyze the content on your website, but this process will effectively use JavaScript to overcome that. First, we’ll talk about the basic idea of creating an image with the text using a basic GD function, imageloadfont().


<?php

$font = imageloadfont("path/to/font.gdf");

?>

You can see the file is in a strange format, but you can safely use this program to convert Windows font files to the necessary format. Using this program within the spectrum of an image created with PHP, text can be written on the image with a certain font:


<?php

$string = "Your string goes here";

//You should define the next two based on the font you are using

$charwidth = ...;

$charheight = ...;

$imagewidth = ($charwidth*strlen($string));

$text = imagecreatetruecolor = ($imagewidth,$charheight);

$font = imageloadfont("path/to/font.gdf");

$white = imagecolorallocate($text,255,255,255);

$black = imagecolorallocate($text,0,0,0);

imagefill($text,0,0,$white);

imagestring($text,$font,0,0,$string,$black);

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

imagepng($text);

imagedestroy($text);

?>

You can see the image is tailored to fit the text so there is no extra whitespace. The only downside is that the ‘charwidth’ and ‘charheight’ variables have to be altered for different fonts.

With just this basic script you can turn text into an image, but how about returning to the overarching idea of dynamically turning text on a website into an image to utilize a desired font. We’ll use some simple JavaScript for that.

Note: I’m using the most basic template of an HTML file to show the idea of the script.


<html>

<head>
<title>Text to Image Conversion</title>

<script type='text/javascript'>

function text2img() {

htwo = document.getElementsByTagName("h2");

for (i=0,tot=htwo.length;i<tot;i++) {

text = htwo.innerHTML;

htwo.innerHTML = "<img src='text2img.php?s="+text+"' alt='"+text+"' />";

}

</script>
<body onload="text2img();">

<h2>This will become an image</h2>

<p>This won't become an image.</p>

<h2>This will also become an image.</h2>

</body>
</html>

Referencing the PHP file we created in the JavaScript of this file will turn each ‘h2’ element into an image. As I mentioned earlier, this will not mess with most search engines, though, because the text will remain for those where JavaScript is turned off. Note, though, that that also means that users with JavaScript disabled will not see the fancy image either, just the plain text, so be sure to style it with CSS as well to insure the design of your website.

2 Responses to “Dynamically Converting Text to an Image”

alex turner
Feb 24th, 2010
6:08 pm

this doesnt seem to be working for me – ive inputted the code in a php and created a test html file. Ive also selected the font by downloading the program and converting it to .gdf, but it still displays all text normally…
Andrew
Mar 2nd, 2010
5:52 pm

Alex –

I was able to get the example working. Make sure you have the path to the font current. When I had it set to the wrong path, PHP throws a warning and then uses the default font. If you have warnings disabled, you may not notice that. Run error_reporting(E_ALL); before any other code to make sure you aren’t hiding any warnings that are getting thrown.

Hope this helps!

About the Author

Kurtis has been working with PHP for nearly four years, and he has moderate experience with MySQL as well as other programming languages, like Java and C++.