o.k.,

 

I thought I might keep this idea to myself, and develop it on my own to reap all the glory.

 

Here is the idea: Replace text in a given area with images for each letter.

 

Advantages?

Imagine converting a whole page of text to images of the fonts (3-d, shaded, outlined).

 

Here is a sample of the baby script in action: http://fabricstashinc.com/r/

(hint: resize your browser window to see that it is not one image.)

 

please don't laugh at it, I just began! But you get the idea, replace any text with an image representing each letter. The text can have a transparent background if it is a .png.

 

Drupal apparently has a plugin that converts .ttf fonts into images, supposedly achieving something like this, but I think this idea is potentially better, because you can get the perfect image with a graphics editing program such as Adobe Illustrator.

 

Here is what I've got for a script so far:

 

$data = 'decadedecc';


$a[1] = "/a/";
$a[2] = "/b/";
$a[3] = "/c/";
$a[4] = "/d/";
$a[5] = "/e/";



$b[1] = '<img src="a.png" />';
$b[2] = '<img src="b.png" />';
$b[3] = '<img src="c.png" />';
$b[4] = '<img src="d.png" />';
$b[5] = '<img src="e.png" />';



$new = preg_replace($a[3], $b[3], $data);
$new2 = preg_replace($a[2], $b[2], $new);
$new3 = preg_replace($a[1], $b[1], $new2);
$new4 = preg_replace($a[4], $b[4], $new3);
$new5 = preg_replace($a[5], $b[5], $new4);


echo $new5;

 

I would like to convert to object oriented approach, but I need a bit more learning first. The main problem with the script as it looks now, is that as it replaces the text with the images, letters in the html brackets start getting replaced with images of the letter. When the replacing is happening, it needs to say "ignore these html tags" - I don't know how to go about that.

 

Obviously most programmers are way ahead of me, but if you could give some advice on how to best achieve the end result I am looking for.

I'm not sure if this may help, but read this article, I think it might help you with your search. Sorry if it doesn't.

good idea, can also be found here http://www.mikeindustries.com/blog/sifr/ (if a search engine is viewing the page they see the text not images so this is a better method on a seo point of view)

 

but on a more helpful note, look into Loop's as you can reduce the code size and have variable replacement and matching arrays, by getting used to loops you will be heading down the right path to pick up OOP design pattern skills easyer... apart from that im in the process of making a tutorial on class's for my blog to help me finish my study s for the Zend Engineer exam... so stay tuned i suppose

help you with your search.

 

thanks much traxor.

 

This is a good idea, and I will look for hints to help write the script.

 

I have yet to see anyone doing this the way it could be done though. Converting .ttf into an image is good, but I would rather have a whole set of images representing a font, that I created with Vector editing program.

 

Also, with this script, you will be able to mess around with your image replaced text with GD, which could make for fun.

 

Also, you could have a script that is AJAX, so as the person types, images representing the letters appear on the page in real time.

This is a nice idea, but can you imagine converting a couple of headers (each with a different styled font) this way and thus generating maybe 50+ separate HTTP requests for the images, when the page is loaded? It's going to slow things down a tad...

 

There are at least 2 better ways to do something very similar - one is FLIR, another is sIFR.

 

They are more about using non web-safe fonts than adding effects - but you could apply the same principles in something custom - either using Flash (as with sIFR) or PHP's GD or Imagemagick libary (as with FLIR).

 

Food for thought maybe?

- one is FLIR

Food for thought maybe?

 

Many thanks Andy,

 

 

yes, this script is the type of thing I was thinking about. I'll do my learning from this script.

 

There is a big difference between my script and theirs however. Theirs is word replace, mine is letter replace. Letter replace is slightly better, because you could resize the page with no problems. Also, you could custom manipulate the letters (represented by images) for kerning etc.

 

I just knew that someone must have made a script like this.. Thank you.

IMO letter replace is not better, because of all the extra HTTP requests. Far better to do all the processing in either Flash or PHP, and simply output the finished block of text as one image/SWF.

 

You could call it with parameters to determine kerning, shadow, italic, bold, font, size, colour, etc.

IMO letter replace is not better, because of all the extra HTTP requests. Far better to do all the processing in either Flash or PHP, and simply output the finished block of text as one image/SWF.

 

You could call it with parameters to determine kerning, shadow, italic, bold, font, size, colour, etc.

 

O.k. Thanks, I checked out Cory's script and it is really, really nice to say the least.

As far is HTTP requests is concerned, I thought the browser would have to download one image representation of the letter, and all the other letters would be clones of the first letter?

Ah, right - no, each is a separate image file so the browser has to make a separate request for it. So "the quick brown fox... etc" is going to mean 26 HTTP requests the first time the browser views the page.

 

After that they will be cached, which is another problem - if you change the images a bit but don't change the filenames, many browsers won't check for new images if they've visited the page before - they'll simply pull the old ones out of their cache.

tbh, this does seam to be reinventing the wheel abit, and what i dont get is why would doing each letter be more beneficial, seams to me that its going to be a heavy bunch of regex expressions which will effect performance alot on big conversions.

 

also as a seo i can tell you having a whole page of imaged text is not a good idea, and one reason why sIFR rocks because SE bots see the unmodified thus readable version... which was the whole point of sIFR anyway

 

if i was you i would skip regex totally, you can do what you want with the GD lib passing the whole string to it using the font you need, would be much quicker and then you can implement your own caching system really easy by simply saving the made image and checking if the end image is saved on the server before making a new one.

 

what do you guys think?

tbh, this does seam to be reinventing the wheel abit, and what i dont get is why would doing each letter be more beneficial,

 

You could resize the page and the text would seem to conform to your resizing the page. You could make the letters know when it is a word so that the text does not break up incorrectly.

 

You could perform interesting maneuvers with the text such as flow along a path, move in silly directions etc.

 

The text is all still there for the robot as text if you must. You could have a button that you would have to click in order for the change to take place, like on Cory's FLIR page.

 

Browser load the (small) images from the cache. Actually I think it could be pretty fast. And instead of having to refresh the cache, do a redirect to a new version of the page.

 

Biggest Advantage? For those who want that extra touch of an extremely high quality looking / flexible page design (which is not me by the way, I'm just saying... for them) this idea for a script could probably achieve this.

i think this article will help you.

 

http://www.theopensurgery.com/13/using-fan...d-gd-libraries/

 

but heres the example code so we can talk about it here [on my machine i resized the page and it grew with the page]

 

<?php
$image = imagecreatetruecolor(300, 100); //create the 'canvas' of 300x100 | imagecreatetruecolor  ( int $width  , int $height  )
$white = imagecolorallocate($image, 255, 255, 255); //RGB color for white | imagecolorallocate  ( resource $image  , int $red  , int $green  , int $blue  )
$black = imagecolorallocate($image, 0, 0, 0); //RGB color for black | imagecolorallocate  ( resource $image  , int $red  , int $green  , int $blue  )
imagefilledrectangle($image, 0, 0, 300, 300, $white); //Fill the background with a color, defaults to black. | imagefilledrectangle  ( resource $image  , int $x1  , int $y1  , int $x2  , int $y2  , int $color  )

$font = 'testfont.ttf'; //the font you want to use
$text = 'A Tutorial'; //the text you are going to print

imagefttext($image, 50, 0, 30, 60, $black, $font, $text); //Positon the text and set its color | imagefttext  ( resource $image  , float $size  , float $angle  , int $x  , int $y  , int $color  , string $fontfile  , string $text  [, array $extrainfo  ] )

header('Content-Type: image/jpg'); //set image type in headers

imagejpeg($image); //output the file
imagedestroy($image); //destroy the variables
?>

 

but if you made your idea, i would be interested and happy to integrate my search engine detection system and put in a cache in, so it donst process the same text and variation twice. all i would want to beable todo is offer it as a download on my blog (with full credits to all authors involved) and freely talk about/use it.

And instead of having to refresh the cache, do a redirect to a new version of the page.

Makes no difference. An image with the same path will be loaded from the cache, no matter where it's called from.

the simplest method to control the cache is to simply delete the cache files so they have to be regenerated and should be done behind the scenes without the user being aware so redirects are a no no in this instance.

Makes no difference. An image with the same path will be loaded from the cache, no matter where it's called from.

 

good point.

 

make the path a variable that can be changed at beginning of script.