PHP Image Replacement Dynamic Font Size

Most of web browser supports standard font-family in rendering a specific site. Some of these fonts are Arial, Times New Roman, Myriad Pro etc. So if you were using different font in your mock up design. You should cut those texts as image to maintain the looks and feel of your design. But what if there are bunch of text that using that font? Is it time consuming right?

One solution that work for that kind of stuff is to create a script which automatically create an image from a text you specified by class or id. The script will look for the class or id attributes and create images from the inner text of that class / id.

Marcofolio.net has already built up this script and finds it so far so good. I used this script in one of my client who use ziggurat font for their site as product title (Magento Site). The only flaws that I notice are that the script doesn’t support a font-size dynamically. You need to declare the font size variable with specific size.
Download it now.

How to make it run?

1. Once you download the files, extract it in your localhost.
2. Run the sample index.php and you can see the text in h1 tag is converted to images.

What if I’m using two or more class?

- As what I said earlier that the script doesn’t support dynamic font size (detecting the text font size of your class) you need to add some changes.
1. Open the ifr.js and find this -- replaceSelector(".title","ifr.php",true); --
.title - Tag (or Class) that will be replaced with images
ifr.php - Location of the PHP file that generates the images
true - Enable / Disable line breaks (Splits each word into an image so it can float)
test.png - Location of the test image

this is for single class only. To add another one you need to duplicate this replaceSelector(".yourClass","ifr.php",true);

2. Find the replacement() function and find this code:

var tokens = items[i].wordwrap ? text.split(' ') : [text] ;

Replace it with

var tokens = items[i].wordwrap ? text.split(' ') : [text] ;
var selectorChoose = items[i].selector.substr(1);
var size = document.getElementsByClassName(selectorChoose)[i].style.fontSize;

3. Below that code: edit this line:
var url = items[i].url + "?text="+escape(tokens[k]+' ')+"&selector="+escape(items[i].selector)+"&size="+size;

Replace with:
var url = items[i].url + "?text="+escape(tokens[k]+' ')+"&selector="+escape(items[i].selector)+"&size="+size;

4. Save it .
5. Now, Open the ifr.php file and replace the $font_size variable with $font_size = $_GET['size'] ;
6. Test it.


If you have any question, Please feel free to add comment.