February 20th, 2009
A cool jQuery plugin : PHP / jQuery Image Replacement
How many times have you wanted to use a very cool looking font for your website, but have withdrawn the idea because you thought that font won`t display properly in everyones’s system.
Well fear not, I had previously posted a tutorial on how you can use PHP to display those lines of texts which use some odd font, by automatically converting it to an image (Tutorial : Convert Text into transparent PNG Image using PHP), this way, you can easily display text with odd fonts.
Recently I found a very neat plugin which automatically converts any text (with font of your choice) into an image i.e from now on you don`t have to worry about text with different or odd fonts. They`ll be automatically converted into a compatible image via this plugin, And don`t worry about the image tag and all, this plugin manages everything 
Plugin name : PHP / jQuery Image Replacement
Plugin Home Page/Demo : http://www.xanthir.com/pir/
Usage
The usage was pretty simple.
- After unzipping the archive, Open
pir.php and First set the fonts folder in the php page. - In your website, include jQuery and then include the
jquery.pir.min.js (for production). -
$(function() { $.pir.options.php="pir.php"; //compulsary to include the php which converts text to image. $("h1").pir({font: "yourfont.ttf", wrap: true}); //will enable automatic text warping.});
Pretty Simple huh ! Enjoy
October 29, 2009 at 9:35 am
I just looked at http://www.xanthir.com/pir/ and also see where the font images are being chopped off without displaying the bottom of letters that go below the baseline. Looking the PHP code I think you could override that if need be. Lines 97-104 are pasted below. The get_dip() method looks at all these characters to try to figure out how tall the bounding box needs to be for the PNG.
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ' .
'1234567890'
'!@#$%^&*()'”\/;.,`~[]{}-+_-='
You'll see that get_dip is returned in $dip which is called by ImageCreatetruecolor where it is subtracted from the $box[5] value. If you're motivated to try, you should be able to override the $dip value received by get_dip() by increasing or decreasing $dip based on the desired output per font implementation.
?PHP
// create image
$font_rgba = extract_color($font_color);
$dip = get_dip($font_file,$font_size);
$box = @ImageTTFBBox($font_size,0,$font_file,$text);
$image = @ImageCreatetruecolor(abs($box[2]-$box[0])+1,abs($box[5]-$dip));
if(!$image || !$box) {
fatal_error('Error: The server could not create this heading image.');
}
Dylan
October 19, 2009 at 4:12 pm
Cool plugin, but it seems to cut off the images from the bottom. Any way that can be fixed?
October 28, 2009 at 7:08 pm
I just looked at http://www.xanthir.com/pir/ and also see where the font images are being chopped off without displaying the bottom of letters that go below the baseline. Looking the PHP code I think you could override that if need be. Lines 97-104 are pasted below. The get_dip() method looks at all these characters to try to figure out how tall the bounding box needs to be for the PNG.
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ’ .
’1234567890′
‘!@#$%^&*()\’”\\/;.,`~[]{}-+_-=’
You’ll see that get_dip is returned in $dip which is called by ImageCreatetruecolor where it is subtracted from the $box[5] value. If you’re motivated to try, you should be able to override the $dip value received by get_dip() by increasing or decreasing $dip based on the desired output per font implementation.
?PHP
// create image
$font_rgba = extract_color($font_color);
$dip = get_dip($font_file,$font_size);
$box = @ImageTTFBBox($font_size,0,$font_file,$text);
$image = @ImageCreatetruecolor(abs($box[2]-$box[0])+1,abs($box[5]-$dip));
if(!$image || !$box) {
fatal_error(‘Error: The server could not create this heading image.’);
}
Dylan