Real-time font preview with PHP?

[tawxic]

I would have an example, but I cannot for the life of my find the site that I saw yesterday :-/ Basically, I want to have a real-time update of a selected font, as you type.

I am somewhat familiar with the GD Library + PHP, I mostly need help interfacing it with whatever non-ServerSide language (probably JS) I need to.

And if anyone can find the font site that has a text box, and as you type, it outputs an image with that text in it, I would REALLY appreciate it!

e: Found it!

http://www.abstractfonts.com/font/11912

Anyone know how I can make something like that?

Thanks,

Edited October 2, 2006 by tawxic

[tain]

I think that gamehead200's dynamic sig guide could be adapted to meet your needs:

http://www.msfn.org/board/index.php?showtopic=47730

[CoffeeFiend]

I think that gamehead200's dynamic sig guide could be adapted to meet your needs

I'd say there's a lot more to it than just that. Making images isn't complicated (not that I'd use php though), but he's also looking for the javascript "zooming" feature as seen on the page he linked to. So he has to learn javascript (and some DOM manipulation and such). Also, generating the odd dynamic sig a few times per hour for displaying on a forum is a very low load. Dynamically generating around a couple hundred pictures (26 letters, lower and uppercase, plus 10 numbers, ~30 symbols, etc - all in 2 sizes) for each and every page load would be stupid, and very taxing on a server.

Something like this out to generate the pictures the first time if they don't exist and save them to HD for future times, or at the very least do some heavy caching.

[tain]

Something like this out to generate the pictures the first time if they don't exist and save them to HD for future times, or at the very least do some heavy caching.

I agree that method would be much better. Running a script to gather the right images would be much faster than generating the images.

Does this then become a JS scripting issue?

[gamehead200]

Doing this cannot be done in real time with PHP using my guide. You would have to have the user submit a form with the font they want to view in order to do it in PHP.

That site is using Javascript in order to do what you want.

[CoffeeFiend]

Does this then become a JS scripting issue?

Yep!

[tawxic]

Aloha,

Okay, so I have this script working:

http://www.triviacafe.com/stamps/fonttest-working.php

However, there are a FEW things I need help with.

1) I need it to use a multiline box, instead of an input box.

a) I need the GD Exported image to MIRROR that of the typed text. So line breaks MUST appear where they are in the multiline box.

Example:

GD Output:

This is a

Test

Content in the Multiline box:

____________________________________

|This is a

|Test

|

|

|

|

|____________________________________

B) Each individual line must be centered.

That means calculating the width of the font (which will be variable, detemined by a dropdown box, I'll add that in myself) and dividing it by half of something or other... I don't understand the math, I'm a designer. That's why I'm here.

If anyone can help me, without just spouting a bunch of numbers at me and expecting me to understand, I would greatly appreciate it.

If you need to email me, my addy is msfn [at] phazm dot net

Edited October 4, 2006 by tawxic

[tawxic]

JavaScript is hard

[tawxic]

I got it.

Thanks all.

[ripken204]

i wish i would have seen this thread before, i would have tried to do it myself...

[tain]

I got it.

Will you post how you did it?

[ripken204]

well i would assume JS where you would type in something, and when you clicked off of it or clicked a button a function would run in which the data is extracted from the text box, run through a filter, and spit back out with the font of your choice.

[tain]

I am hoping he will post the code