Dynamic Text Replacement
by {embed="embeds/article-authors" entry_author=" Stewart Rosenberger" entry_username="stewartrosenberger" entry_id="14795"}
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}{if "http://www.kadavy.net"} kadavy {if:elseif twitter} kadavy {if:else} kadavy {/if}
That is all.
{if "http://www.iqcontent.com"} Colm {if:elseif twitter} Colm {if:else} Colm {/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 "http://www.onlinetools.org"} Chris {if:elseif twitter} Chris {if:else} Chris {/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 "http://www.amonre.org/"} amon-re {if:elseif twitter} amon-re {if:else} amon-re {/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 "http://localtype.org"} CM Harrington {if:elseif twitter} CM Harrington {if:else} CM Harrington {/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 ""} Andy Moss {if:elseif twitter} Andy Moss {if:else} Andy Moss {/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 "http://superwasp.net"} oVan {if:elseif twitter} oVan {if:else} oVan {/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 "http://www.amonre.org/"} amon-re {if:elseif twitter} amon-re {if:else} amon-re {/if}
I believe this could be fixed by specifying an “alt” attribute, no? :)
{if "http://www.stewartspeak.com"} Stewart Rosenberger {if:elseif twitter} Stewart Rosenberger {if:else} Stewart Rosenberger {/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 "http://idsland.com"} Ned Baldessin {if:elseif twitter} Ned Baldessin {if:else} Ned Baldessin {/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 "http://www.achinghead.com"} waylman {if:elseif twitter} waylman {if:else} waylman {/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 ""} ceejayoz {if:elseif twitter} ceejayoz {if:else} ceejayoz {/if}
Replacing text with a link in it seems to lose the link… any workaround?
<h1>link</h1>
becomes a nonclickable heading…
{if ""} matt {if:elseif twitter} matt {if:else} matt {/if}
Have you tried the <h1>‘s on the outside of the <a>‘s?
{if ""} Roel Van Gils {if:elseif twitter} Roel Van Gils {if:else} Roel Van Gils {/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 "http://www.stewartspeak.com"} Stewart Rosenberger {if:elseif twitter} Stewart Rosenberger {if:else} Stewart Rosenberger {/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 ""} ceejayoz {if:elseif twitter} ceejayoz {if:else} ceejayoz {/if}
I’ll try that, thanks! :-)
Wonderful script, btw.
{if "http://www.whole-studios.com"} Ryan Schroeder {if:elseif twitter} Ryan Schroeder {if:else} Ryan Schroeder {/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 ""} Peter Zsodlos {if:elseif twitter} Peter Zsodlos {if:else} Peter Zsodlos {/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 ""} Peter Zsoldos {if:elseif twitter} Peter Zsoldos {if:else} Peter Zsoldos {/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 "http://english.info.org.il"} Hanan Cohen {if:elseif twitter} Hanan Cohen {if:else} Hanan Cohen {/if}
Create a PHP file with one command that will tell you everything about the environment.
<?
info();
?>