Dynamic Text Replacement

by Stewart Rosenberger

280 Reader Comments

Back to the Article
  1. I checked and I left my MIME type as image/png.

    Again, I appreciate your help with any suggestions that might break through this.

    RegEx (or anyone else), I would be happy to email my files if that might enable you to see directly what might be amiss.

    Copy & paste the code below to embed this comment.
  2. Or you can upload heading.php into your server as heading.txt. You can reach me by using the contact form at my site.

    Copy & paste the code below to embed this comment.
  3. Hey guys, do you mind addressing questions about implementation of DTR?  A wonk at b2evo suggested I give it a whirl because I want to display text in an Ancient Greek font complete with accents and other unusual diacritical marks.  So I followed the instructions and it ALMOST works—the swapout happens, and I get a PERFECT “alt” text, but the image doesn’t load—just an image placeholder, with a little bar for every character that should be there.  Any thoughts?

    Thanks.

    mikeyboy

    Copy & paste the code below to embed this comment.
  4. Ok, I hate not being able to figure things out for myself, so I read the article again—my server probably lacks support fot the GD graphics library.  I don’t yet even really know what that means—I’ve got their website open in another browser window right now to try to figure it out, and then I will go to my hosting service (the much-maligned Hostdime) and see what they have to say about GD graphics library support).

    Think I’m on the right track?

    Thanks again.

    mikeyboy

    Copy & paste the code below to embed this comment.
  5. I really liked this article and have found it really usefull. One problem I have found when putting it into practice is that the word spacing can not be controlled. Does anyone know how this could be done?

    Copy & paste the code below to embed this comment.
  6. Sorry for being rather remedial, but can anyone help with the syntax of using a class in the replaceSelector(“span”,“fontconvert.php”,true);
    line, i.e. if I want to replace only span class=“fancy” or something. Thanks.

    Copy & paste the code below to embed this comment.
  7. Use CSS selectors. For a span with class “fancy” use:

    replaceSelector(“span .fancy”,“fontconvert.php”,true);

    There’s a space between span and .fancy. I reccommend Eric Meyer’s “Cascading Style Sheets: the definitive guide” to you for learning about CSS. It’s a great reference on CSS 1 and 2.

    Copy & paste the code below to embed this comment.
  8. Thanks very much for the syntax help. I have the book you recommended, though more often I use Meyer’s CSS 2.0 Programmer’s Reference.

    Thanks again.

    Copy & paste the code below to embed this comment.
  9. I keep getting this error

    “Error: No Text Specified”

    I have the <h2> tags in my document to be replaced but it wont work. What am i missing?

    Copy & paste the code below to embed this comment.
  10. I found I had to write it withOUT the space for it to work.

    replaceSelector(“span.fancy”,“fontconvert.php”,true);

    Copy & paste the code below to embed this comment.
  11. This is a very interesting notion from my point of view, I am building a web site on obscure Fonts. I have tried to follow your (great) tutorial as closely as possible, but it didn’t work for me. Here is the page

    www.osop.org/textrep.htm

    Can any one tell from here whats going wrong???

    Thanks in advance John Maillard

    Copy & paste the code below to embed this comment.
  12. I really like this, and have used it on a site of mine…had one problem though:

    When I changed the text-size in the .php file and refreshed in IE, the image stayed the same size and the font went all pixely.  This doesn’t happen in Firefox.  This continued to happen after I deleted all my temporary internet files etc.

    Anyone else encounter this, or know whats happening?

    Copy & paste the code below to embed this comment.
  13. Great script. Discovered it only yesterday.
    First time I did something with PHP. Well.. did something… copied it and used other values. That’s it.
    It workes and I’m impressed.

    I had the idea to copy the fonts to a directory above root like common with databases. You don’t want to distribute your fonts. You just want to use them. So you don’t want the visitors to download them.

    For example you have the following 3 direcories on your ftp site.
    database – well it says it all
    www – the root directory of the website, here are the htm’s, asp’s, php’s and everything
    fonts – the font directory, available for the scripts but not for visitors of the site

    Is it easy to adjust the php script to use that dir? Should be, I guess, but I don’t know anything about php yet. 

    And is are there scripts online with all improvements discussed before included?
    I mean the security issues and easy maintanance improvements like just one php script instead of one for every variation.

    Marcel

    Copy & paste the code below to embed this comment.
  14. I managed to get a simple demo working in less than an hour. Pretty good for someone like me who’s just a hack at JavaScript and knows slightly more than zero about PHP.

    http://darrenwilson.com/test_tube/dynamic_text/

    I don’t know if it’s my font selection (I just used some freeware TTF fonts i had on my machine… most of my fonts are PostScript) but i’m experiencing some odd word spacing problems. Is this due to font selection or some other issue?

    Copy & paste the code below to embed this comment.
  15. congratulations for the article.

    Copy & paste the code below to embed this comment.
  16. After reading some of the previous discussion, i confirmed that the problem i’m experiencing with word spacing issues is entirely related to having word wrapping set to “true.” Turning off word wrapping makes everything space nicely.

    Has anybody come up with a solution that will allow word wrapping but preserve proper word spacing?

    Copy & paste the code below to embed this comment.
  17. Hi Stewart,
    I really appreciate your downtime – your earned it for that article alone >;o)

    Anyway I need help on this promising solution, maybe somebody else could have a look at my files.

    This is the problem:
    To call the script directly with
    http://www.crimeZZZ.net/demo/h1.php?text=eliZZZa
    works fine and produces the cache image.
    Called via the test page
    http://www.crimeZZZ.net/demo/demo.htm
    does not show anything and does not generate a cached image.
    The rest of the files named as in Stewart´s example.

    Up to now I checked the following:

    • Requested support from my provider – everything okay from his point
    • Tested in various browsers – same result

    I really don´t see the error – what am I missing???

    Great thanks for any help
    eliZZZa from Austria

    Copy & paste the code below to embed this comment.
  18. Hello Stewart, your script and your idea are absolutely awesome! A great way to make use of PHP’s powerful features.

    Unfortunately I was unable to make it work and since this (posting a comment here) seems to be the only way to get some kind of support (hopefully you’ll have a support forum at your new site) I thought I’d give it a try because I would really like to use it.

    I am using FireFox (Mozilla 1.7.3). My Apache server has PHP version 4.3.8 with GD enabled (it says version: bundled 2.0.23 compatible) and PNG support enabled. So I think I meet the requirements, don’t I?

    As far as settings I can’t see how I could have done anything wrong…

    I have looked at your on-line demo and copied your settings as a last try but I still don’t get anything.
    I have copied the test.png file to the same folder where the other files are and I have copied your entire replacement.js file to make sure it’s all the same as in your demo. I have named my PHP file h2.php and inside it I have set the path of the font to: ‘/home/username/domains/chaindlk.com/public_html/sources/text-replacement/JaggedDreams.ttf’
    (in this URL I have replaced my username with the word “username” for privacy). I know for sure that this is the correct path because:
    1. I have looked it up in the server’s documentation
    2. I have this path on a CGI file I am using and it works
    3. if I change the path your script gives me a “font missing” error, but with this path I simply don’t get anything at all

    I have also tried using absolute URLs (even though the articles instructs to use the path and not the url).

    As for fonts I have tried 5 different ones to make sure it wasn’t an issue with the font.
    I have tried:
    prefix.ttf
    lydianv.ttf
    JaggedDreams.ttf
    and then I thought of trying the OTF ones and went to http://freefonts.fateback.com where I have downloaded:
    JaggedDreams.otf
    JungleBurnout.otf

    Basically I don’t know what else to try.
    I have troubleshooted this as good as I could.

    Here is the link:
    http://www.chaindlk.com/sources/text-replacement/h2.php?text=test

    What else can I try?

    Also, if I ever get it to work (hopefully somebody will help me here) I have one question:
    is it safe to assume that on an apache server I can set $cache_folder to ‘var’ because (as far as I have read) that is Apache’s temporary files directory. If this is not correct and I leave it set to ‘cache’, would I have to create the directory inside the folder where all the files reside or would I need to create it in the root and give it a path (or an url)? Also would I need to chmod it to 777?

    I hope somebody will be able to answer my questions and make this gorgeous script work for me as well!

    Thanks

    Copy & paste the code below to embed this comment.
  19. I think I have figured out that this will NOT work unless the server has the TTF library support (FreeType library from freetype.org). Is this correct? Can somebody let me know? Thanks

    Copy & paste the code below to embed this comment.
  20. works great, but i have one big problem. when i work with text in tables the m$ internet explorer doesn´t makes a word warp.

    in firefox the word warp works, but there the script has problems with image generated numbers like “6.”

    outside of any tables, the word warp works also in ms ie…

    for example:
    http://www.joerg-wikinger.de/example.html

    Copy & paste the code below to embed this comment.
  21. The test.png was uploaded in wrong format (ASCII instead of binary) – that´s why it did not work.

    I am delighted by your solution!!!
    eliZZZa

    Copy & paste the code below to embed this comment.
  22. Trust me I understand, I use php and have for years so I talk till I’m blue in the face about how great it is, however the flipside to this coin is some companies are so M$ brainwashed that anything but asp or likewise technologies are shunned no matter how many advantages you can prove with your favorite language.  I’m a php programmer in the heart, but alas, my shop forces me to write asp to earn the paycheck…

    Copy & paste the code below to embed this comment.
  23. discovering this technique has really saved me a lot of time. I have been playing with it a bit today and am trying to find out if anyone has either of these two problems.
    1. I have several different span classes set to trigger the text replacement.
    for example-
    span.heading
    span.big
    etc.
    when I have checked the results in ie6 it only changes the first span.class it sees and the rest of them just come up as the normally formatted span.
    and
    2. in netscape 6 it does recognise every span.class listed and change to the new font but when the normally formatted span is viewed without the php/js links, it comes up with no space at all between words.
    the site in question is viewable at
    http://www.thepeartreeofbrookline.com
    thanks.

    Copy & paste the code below to embed this comment.
  24. Please help me get past “Error: The server could not create this heading image.”

    First off, here is the phpinfo:
    http://www.hai.org/imagereplace/info.php
    It seems to have all the FreeType support, GD version, etc. that is required.

    I am definitely passing the test of finding the font, but, since others who have had this problem have suggested it, I tried the following variations for $font_file:

    1. absolute address
    2. All the variations of document root addressing that have been mentioned in this discussion so far.

    The ONLY changes I have to the heading.php that Stuart provided is the name/location of the font and a font size of 36.

    I have traced the error to occurring with the call to @ImageTTFBBox but the discussions of that here have provided no answers.  Stuart?  Someone, please help.  I have spent way too much time on this without finding a solution.

    Copy & paste the code below to embed this comment.
  25. first i want say that this technique is great.

    i have a question about this:
    Stewart Rosenberger says at the the end of the article »… although getting rollovers to work would require more customization.«

    ist here any way to do rollovers? for examble to change the fontcolor on hover.

    would be perfect!

    Copy & paste the code below to embed this comment.
  26. Problem with this approach is that you can only use ttf fonts, not adobe fonts (I know this for a fact with ASP.NET and C#, and from what Ive gathered it is hard if not impossible to try to convert them to ttf; the software for that stuff is supposedely really expensive).

    I dont know about you guys, but all my fonts are adobe fonts.. You can use a similar approach with flash if you need more than just ttf fonts..

    The cool thing about using flash is that the swf is loaded once, then it can be used for your entire site since its cached.. The bad thing is that support for flash is sometimes questionable.. I go around this by just showing a crappy arial/tahoma/verdana H1-H6 heading whenever the user doesnt have it, and it works out fine.

    Check this link out… this is where I first saw it.

    http://sports.espn.go.com/nhl/news/story?id=1715637&partnersite=espn

    Here, look at the headline, its all in flash and the headline gets passed in as a querystring in the object/embedd tag.

    Copy & paste the code below to embed this comment.
  27. thank u for that nice script! :)

    Copy & paste the code below to embed this comment.
  28. Works like a charm but when navigating with browser buttons, dtr seems to replicate with no way of stopping… only on mac versions of IE 5.0+
    Anyone else getting/seeing this bug?

    Thanks.

    Copy & paste the code below to embed this comment.
  29. Sir, i just want a help from you that, could we make a text written on uppper side and lower side of image dynamically. If we insert a text from a textfiled called Upper side and other text from a textfield called “Lower side”. I want that the text enter in Upper side textfiled goes automatically at the upper side of image and same for lower side textfield , could it be possible from Javascript.

    Please look an example given at Url:
    http://www.ringcompany.com/designcenter.html


    Click on the right side image. Apopup will open.

    Insert username=amitk
    Password=weblink

    Click on saved design.

    Then click on the link “new1_25_11_04” provided below the link of “Design Name”


    This will show you the details of product. Click on next step.

    Click on Edit.

    This is the example of what i am taling about.

    Enter any text in Upper: or Lower textfields.

    This will show you on image at runtime.

    Please tell me that it is possible in PHP or Possible in Javascript.

    Early reply will be appreciated.

    I trust your site very much.

    Please reply soon.

    Copy & paste the code below to embed this comment.
  30. This caught my eye.

    After trying Shaun Inman’s IFR and injuring myself by the number of problems and lack of support, this script looks promising.

    But a few questions:
    1- How would I be able to get an image to occur in the output?
    (eg: a dotted line automatically to be inserted underneath the outputted image text)

    2- Can you change the case?
    (eg: Original text would be normal case, but final image should all be uppercase)

    If these problems can be ironed out then it would be a perfect script.

    Support welcome, Matthew.

    Copy & paste the code below to embed this comment.