Did you ever use PHP + CSS Dynamic Text Replacement ?

I just came across an interresting solution to customize heading while keeping things standard compliant :

PHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method originally created by Stewart Rosenberger.
The initial P+C DTR method by R. Marie Cox was lacking word-wrapping and the ability to use inner tags, so I took the code and rewrote it, giving it more flexibility and performance.

• Valid xhtml and valid css
• Style the element in a regular CSS file
• Uses only open source tools and doesn’t require any plugin (unlike sIFR that relies on proprietary Flash)

Supports :

• font-family
• font-size (in points)
• color
• background-color
• a:hover
• text-decoration: underline
• text-transform: uppercase/lowercase

Does not support yet :

• text-align
• font-weight
• letter-spacing
• line-height
• text-shadow

http://www.joaomak.net/util/dtr/
And the Google Code page : http://code.google.com/p/pcdtr/

Anyone tested it yet ?

We’ve (Collabpad) got a DTR add on that we’ll be releasing soon, and it actually addresses a couple of things that the mainline one doesn’t quite yet (including letterspacing). It works pretty well but there’s still a few gotchas lurking about that we want to fix. Brian Stanback has done the coding on it for us and it is cool indeed.

Good to know !

Better wait then

I definitely appreciate that it doesn’t use Flash, but sIFR has some advantages over this method that might still make me prefer it. For one thing, sIFR text is selectable (and copy-and-pasteable), whereas these are images with SEO/failsafe text hidden via CSS. And I doubt that a transparent background would work well for these so that they could appear overtop of content other than a simple background color (this would only work properly with good 24-bit PNG images, I think; GIF transparency looks terrible for such things), whereas sIFR can do this very nicely.

And at least as a demo, these image headers just don’t look all that hot. That’s probably a quality issue that can be adjusted somewhat, but fonts as images are never as crisp and readable as actual text. And of course if you enlarge or reduce the text size in your browser, these images aren’t affected (sIFR isn’t either, however).

It seems as if it wouldn’t be all that difficult to turn this into a MODx plugin so that folks who want to use it can do so.

That’s what we’ve done (turn it into a plugin).

Even cooler !

@ZAP : food for thoughts... good points.

I don’t think transparency will be an issue in most case.
the "Copy-and-pasteable" is indeed an issue...

It’s true that siFR offers better anti-aliasing, I guess we have to deal with the current limitations of server image manipulation (or do we ?).

Anyway, I look forward to testing this plugin

Quote from: davidm at Mar 25, 2008, 10:51 AM

I don’t think transparency will be an issue in most case.
the "Copy-and-pasteable" is indeed an issue...

It’s true that siFR offers better anti-aliasing, I guess we have to deal with the current limitations of server image manipulation (or do we ?).

We’re working on a design now that has a crumpled texture underneath where we’re using custom font headers, so this technique wouldn’t work for us there. I also like to overlap text on rotating photos at times, and that’s right out. I’ll definitely try this technique when I have a design that it can work for, however, since I hate requiring Flash and JavaScript just to view a font (and I hate having to boot into Windows to create the font’s swf file).

Maybe the next step is to look for an image library that can create high-quality 24-bit PNG images with transparency that could be made to work with this script.

And then of course the obligatory fix for IE6 not displaying PNG transparency...

Duhhhh, I feel your pain...

Image replacement is not the only thing around as everyone is aware, but webfonts still have to be revived

I can’t believe how slow the industry is to react... then again building standards is a long process...

CSS3 is still in the distant future (as latest test show) and browsers do not seem to give much thought to webfonts... until then we have to find the best compromise to each specific situation

That’s not text-replacement but I found this interresting gradient effect to apply to title, purely using CSS :
http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/

Very nice trick