Dynamic Text Replacement

by {embed="embeds/article-authors" entry_author=" Stewart Rosenberger" entry_username="stewartrosenberger" entry_id="14795"}

280 Reader Comment{if "280" > 1}s{/if}

Back to the {if "articles" == "columns"}Column{if:elseif "articles" == "blog"}Post{if:else}Article{/if}
  1. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    That is all.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  2. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Is it not an Accessibility requirement that you must be able to resize text? with this method I don’t see the possiblity of increasing the size of the dynamic images?

    Other than that minor flaw, the method is excellent!

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  3. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Good question, however, if we look at accessibility in a logical way, it does not make sense to only zoom the text anyway. Screen magnifying software (every OS these days has inbuilt ones) magnify the whole screen. So does Opera, btw. It would be interesting to see how much more users use these tools rather than the hard to find (at least in IE) browser zooms.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  4. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    One method to solve the accessibility method is to add a JavaScript script which doesn’t just increase the font size, but also loads new images.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  5. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Interesting idea. Personally I find it a bit heavy and limited, as you can’t kern or otherwise manipulate the headline image dynamically. This could lead to fitting problems.

    The other flaw is that this doesn’t work for screen readers. Most modern screen readers use IE as the rendering engine, and merely speak everything that it sees. If the javascript replaces the headlines with images, they will no longer be read.

    This however is untrue in regard to text-only browsers. Obviously they will work “properly”, as the text will not be replaced.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  6. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Does this method allow for different coloured matts? or are the images using an alpha channel? Also is it possible to set the images to render with only one picture as the volume of connections this would create could affect busy sites. Im certainly not criticising this. I think its a wonderful idea, just some thought for version 2 :)

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  7. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Anyone care to make an asp.net version of this? Microsoft uses dynamically generated in a lot of places now: see the gray banner “Microsoft Windows Small Business Server 2003” at http://www.microsoft.com/windowsserver2003/sbs/howtobuy/default.mspx
    They use an asp.net script with the text to display encrypted as parameter to generate these headers: http://www.microsoft.com/library/toolbar/3.0/subbanner.aspx?t=TWljcm9zb2Z0IFdpbmRvd3MgU21hbGwgQnVzaW5lc3MgU2VydmVyIDIwMDM=&f=FFFFFF&b=757575&s=A7A7A7&r=False&font=Segoe,+13pt&v=0&c=HgjbLWiigY01WAeFBYwa4dzXjGY=

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  8. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I believe this could be fixed by specifying an “alt” attribute, no? :)

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  9. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    To answer some questions posted here:

    1) Yes, this method allows for different matte colors. The matte color (if transparency is chosen) will be the $background_color variable. No alpha channels are being used (because of IE’s lack of support), but this script could be altered to do so, if you were inclined.

    2) As mentioned above, screen readers should all read this text correctly, because the ALT tag is maintained throughout this process. To my knowledge, no screen reader will ignore an ALT tag, if it is present.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  10. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Safari (v1.2.2) doesn’t store the replaced images in cache, so each time you reload the page you have to wait for the images to load. This doesn’t occur in Moz (and I haven’t tried yet in other browsers).

    The HTTP headers sent by the PHP script are :
    Date: Tue, 15 Jun 2004 14:17:51 GMT
    Server: Apache
    X-Powered-By: PHP/4.3.7
    Keep-Alive: timeout=15, max=99
    Connection: Keep-Alive
    Transfer-Encoding: chunked
    Content-Type: image/png

    Maybe adding headers like “Expires”, “Cache-Control” and “Pragma” will force Safari to store them ?

    Cheers.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  11. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Very interesting solution. However, if I understand things right you have to edit a php file to change the color and a js file to change the font (or is it the php file for both?). Not exactley convienient. What happens when you want an alternate stylesheet with different colors and/or fonts? While this method may work great for some, I just don’t see it working for everyone. Now, if there was a way to define the color, font, textsize, etc in the css and use that data to create the images I could see this as a more usefull solution.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  12. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Replacing text with a link in it seems to lose the link… any workaround?

    <h1>link</h1>

    becomes a nonclickable heading…

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  13. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Have you tried the <h1>‘s on the outside of the <a>‘s?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  14. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Chris: it is true that modern browsers like Opera allow you to scale everything on a webpage, including the images. Hoewever, if you’re visually impaired (like me), it’s not nice to read titles that look like ugly pixelated bitmaps when they’re enlarged.

    If you would use vector titles (Flash or SVG), then the enlarged titles would still look crisp and be a lot easier on the eyes. Opera does a very good job on enlarging pages that consists of plain HTM text and Flash applets (don’t know about SVG), but bitmaps will be bitmaps…

    btw: enlarging an image is also possible in Firefox. The Mouse Gestures extension has a very intuitive and elegant way tot do that and I use it a lot when I need to read small bitmap print on webpages. To read the small vector fonts in Flash applets, I usually just use the ‘Zoom in’ function on the context menu of a Flash movie.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  15. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    waylman: Both the font and the colors are stored in the PHP file, which generates the images. Although it would be nice to store this image in a CSS file, and dynamically apply it, it would require a lot more Javascript to do so, and the JS file here is already 8k in size. Either way, it’s still better than specifying your font/colors in Photoshop.

    ceejayoz: You can make linked-headings work by replacing the link tag, not the heading. If you replace the heading, the link will be wiped out.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  16. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I’ll try that, thanks! :-)

    Wonderful script, btw.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  17. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    I was under the impression that PNGs aren’t properly supported by certain browsers…

    Is there a particular reason you don’t use GIFs?

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  18. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Haven’t tested it yet, but this is how I would go about doing it:

    Modify the image generating script to take its parameters from the $_GET array. In the php script specify some defaults, and update the appropriate properties supplied to the script.

    In javascript create an additional function (get_font_style(selector)), which would determine the style information for the text which is to be replaced.

    Then just sit back, and call
    replaceSelector(selector,get_font_style(selector),true);

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  19. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    correctly spelled is: Peter Zsoldos. I think I just my rights to make fun out of all my non-HUngarian friends who can’t spell it. ouch.

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.
    {/if}
    Copy & paste the code below to embed this comment.
  20. {if FALSE != ""} {if:elseif ""} {if:else} {/if}

    Create a PHP file with one command that will tell you everything about the environment.

    <?
    info();
    ?>

    {if ""} Edit {if member_group == "1"}Delete{/if} {/if} Embed
    {if ""}
    Comments are editable for one week.