Search This Blog

Feb 1, 2011

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. 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.


Anonymous said...

Hi, is there a way to change direction to rtl. Please can you post a tutorial on this.
Thak you.

Emperial Killer said...

Hello, what tutorial specifically you want?

Anonymous said...

I have an ebook which has some arabic text inside. Unfortunately my nook can not handle arabic text so I want to convert all arabic text into images. I used php dynamic image replacement but default direction is ltr and glyphs are not where they are supposed to be. Unfortunately I don't know how to change direction and even if I could, I am not sure if the glyphs will work fine.

Here is a sample text (html tags are not allowed, hope you will understand):

-p- This is regular ltr text. -span class="arabic"-جُمْلَه شِيرَانِ جِهَانْ بَسْتَهء اِيْن سِلْسِلَه اَنْد -/span- This is regular text.-/p-

I want to change all the span tags with class="arabic" to image with right direction which is rtl and proper glyphs.

I have been searching for an answer for quite a while and I am very desperate. Please help me.
Thank you in advance.

Emperial Killer said...

Hello, so basically you want a right to left direction for your ebook arabic text. One question though, thus your website cater also english language, which allow reader to switch? if not you can use dir tag of html to change direction,

Here is sample code:

<html dir=rtl>
blah blah blah

You can also try this resources :

Let me know if it will works.

Good luck

snn40tr said...

Yes my book is bilingual.
-p- This is regular ltr text. All in english -span class="arabic"-جُمْلَه شِيرَانِ جِهَانْ بَسْتَهء اِيْنسِلْسِلَه اَنْد -/span- This is regular text.-/p-
And arabic class supposed to be rtl.

Unfortunately Image replacer overwrites html' direction attribute for .arabic class.

I was asking if there is a way to change the direction in the image creating code. So that images will be created in rtl direction by default.

I checked the resources, they are about how to change direction via html or css. I already tried them, but as I said, images always have ltr direction no mattter what css or htm is.

Thank you very much.

Janzell_jurilla said...


Does text in your ebook is auto-generated? Cause what I'm thinking before you export it in pdf you should format it in rtl direction.