jQuery Image Text Replacement: Work In Progress
The JavaScript text replacement on this site is a jQuery Plugin i’ve written as an adaptation of the techniques detailed in Dynamic Text Replacement by Stewart Rosenberger in A List Apart Issue 183. The current source of the plugin can be found here. I’m calling it jitr, and you can’t stop me.
Currently it’s a work in progress and utilizes an extended version of Stewart’s Dynamic Heading Generator PHP script. The plugin will attempt to replace the text of an element such as a heading with text generated in a specified font in the same colour and size as specified in the CSS. It will generate one image per word allowing word-wrap to occur.
There is currently a known issue with IE (all versions) when using jitr with em based font sizes. Internet Explorer reports a size which does not represent the equivalent font size in pixels.
Syntax:
jitr(String fontfilename, String backgroundColor)
jitr returns the jQuery object so that it can be chained.
There is currently however one major part of the process which lies outside of the plugin. To avoid a flicker of unstyled content on document.ready, it is necessary to include a stylesheet (hide.css) which sets the elements which are to be replaced to have ‘visibility: hidden’. As each element is image replaced, it’s CSS visibility is reset to visible.
Example hide.css
h1, h2, h3 {
visibility:hidden;
}
Simply including this stylesheet in the head would have adverse side-effects for visitors without JavaScript though. The CSS above would hide all the headings and the plugin, not being run, would not then reset them to visible. I have decided for the time being that the only solution i can see which will work, although slightly clunky is to use a document.write to include hide.css only when JavaScript is enabled.
<script type="text/javascript">
document.write('<link rel="stylesheet" href="/path/to/hide.css" ' +
'type="text/css" media="screen" />');
</script>
Posted in Projects, Web | Tagged with: JavaScript, jQuery, plugins
May 21st, 2008 at 8:43 am
Hi – fantastic work. This is extremely useful. How did you extend Stewart Rosenberg’s script?
I had to add a space to the text to get it working properly, but even then, I end up with slightly different text size and kerning to you.
E-mail me your version of Rosenberg’s script if possible. I’ll definitely keep up with your progress on this.
May 21st, 2008 at 9:00 am
I hadn’t included the PHP source as I wasn’t intending on anyone attempting to use this technique. Not that i’m not glad you’ve had a play with it.
As you’ve found, additional space characters need to be added and this is handled by the modified PHP script, as well as picking up the font color and size passed in by jitr.
sp, just for you (and anyone else who might be interested) the php source is available here:
http://jamazon.co.uk/files/src/php/jitr.php.txt
May 30th, 2008 at 11:22 am
I’ve written a Drupal plugin for your script, and submitted it at http://drupal.org/node/261799 … wait to see what happens.
July 29th, 2008 at 4:05 am
I’m having a bit of trouble with this. Where do you put the font? Your post doesn’t really seem to say…
July 30th, 2008 at 7:56 pm
Sorry you’re having trouble. I never really intended this as a howto, although all the info is here for anyone interested in using the technique. I may ‘officially’ release jitr at some point with ful instructions.
But on the subject of the font. You can place your fonts it anywhere you like. As long as it’s readable by PHP
When you invoke jitr you pass it the path to the font you want it to use relative to the root of your site.
July 30th, 2008 at 9:08 pm
So would http://www.example.com/fonts/whatever.ttf work?
or /fonts/whatever.ttf even if you aren’t running off the root?
Also, if you make them into a link, does a:hover work to change colors or even fonts?
July 31st, 2008 at 10:57 am
I’m not sure I understand what you’re asking. All you need to do is pass in the file path that PHP needs in order to open the file.
hover states won’t work. This could be implemented pretty easily but you’d straight away be doubling the number of server callbacks needed to generate the images.
If that sort of thing is important to you, you might be better off with sIFR
January 5th, 2009 at 2:28 pm
Hi there,
Firstly thanks for a great script! I noticed that all the images were different heights depending on what text you had in the heading. I have worked around this by making heading.php read the height from an extended character chr(219) which is a full block & even if that is not available it should put in an n/a character which is also full height.
I used the following code:
$image = @ImageCreate(abs($box[2]-$box[0]),abs($box[5]-$dip)) ;
becomes
$boxMax = @ImageTTFBBox($font_size,0,$font_file,chr(219));
$image = @ImageCreate(abs($box[2]-$box[0]),abs($boxMax[5]-$dip));
I hope this helps! There is probably a better solution but I am a lowly front end developer
January 5th, 2009 at 2:43 pm
Also…. (to make the fonts actually line up)
ImageTTFText($image,$font_size,0,-$box[0],abs($box[5]-$box[3])-$box[1],
becomes
ImageTTFText($image,$font_size,0,-$box[0],abs($boxMax[5]-$box[3])-$box[1],
October 29th, 2009 at 3:40 pm
use
———— $(“.jitr”).each(function() {
$(this).css(“visibility”, “hidden”);
})
————
instead of
————
document.write(”);
————