Cufón, an Alternative to sIFR for Image Replacement
I was struggling with sIFR yet again this morning, an odd WSOD in IE7 and other problems. John Haas showed me Cufón as a replacement, and I was quickly impressed with its potential. The project promises cross-browser compatibility with no plug-ins (bye, bye, Flash!), as well as being fast and easy.
Image Replacement with Cufon!
So I gave it a whirl. At first, I opened a feature request at the Dynamic Rendering module to add support, at the same time digging into the module to see what I would need to add for this new plugin.
However, in the end, I decided the approach was too heavy handed. All I needed to do was add a couple of (very small) scripts to the theme.
First, you need to download the cufon-yui.js script. Then you'll take your TTF or OTF font and run it through the provided generator, resulting in a small (<26kb) script that embeds your font (such as A_Charming_Font_400.font.js in this example).
I just dropped the required javascripts into the theme folder, and modified the theme's info file:
scripts[] = cufon-yui.js scripts[] = A_Charming_Font_400.font.js scripts[] = mytheme.cufon.js
And finally drop something like the following in the new mytheme.cufon.js script referenced above. (Just use jQuery selectors for this part.) You can look in the generated javascript if you're not sure what fontFamily to replace.
if (Drupal.jsEnabled) {
$(document).ready(function() {
Cufon.replace('h2.title', { fontFamily: 'A Charming Font' });
Cufon.replace('#big-title', { fontFamily: 'A Charming Font' });
// Note you can add other generated fonts as well, such as below...
Cufon.replace('#fancy-title', { fontFamily: 'Some Other Font' });
});
}
That's it! No flash required, no "flash of screen" associated with sIFR. It just works. (And did I mention fast?)
The Society for Venturism has chosen me as the recipient of its charity for this year, to hopefully offer me cryonic preservation when the time comes. And this month, Longecity, an excellent forum for the discussion of issues related to extending the lifespan of humans, has offered up a matching grant of up to a thousand dollars to help out! So help out! Please.
Special Needs Trust
Special Needs Trust (Donations are not tax-deductible)
Drupal Multimedia, by Aaron Winborn, Available Now!Recent comments
-
AaronELBorg (not verified)
"A warriors anthem? What makes you a warrior?"
OK, I'll bite.
Anyone who has to rely 100% on someone else for their every need and still faces the day with a smile is a warrior. Simple as that.
Anyone who has to rely 100% on someone else for their every need and still shows their children that life is an incredible thing worth living is a warrior. Simple as that.
I think you get my drift....
But come to think of it, anyone who leaves anonymous internet comments encouraging a man who struggles to swallow his own saliva (among countless other DAILY challenges) to "examine the story" of Jesus is just plain mean and completely dismissive of his condition.
"Selfish" would be to roll over and die, Sara. Fighting to enjoy one more day while one's body slowly shuts down bit by bit is the essence of what it means to be a warrior.
I think I understand what you're trying to convey but you come off as glib and rude. If your goal is to "spread the word of Jesus", you've just done the exact opposite.
-
AaronELBorg (not verified)
Damn!
Missed this. Where's the vid?
Coworker's at D-Con this year and not me.
-
mherchel (not verified)
Glad that you're able to make it in one way or another! :)
-
Franchesca (not verified)
hello!,I love your writing so so much! proportion we
be in contact more about your article on AOL? I require
a specialist on this house to solve my problem.
May be that's you! Looking ahead to see you. -
how to pick up girls the game (not verified)
Greetings! I've been reading your weblog for a long time now and finally got the bravery to go ahead and give you a shout out from Atascocita Texas! Just wanted to tell you keep up the good job!
Popular content
- Drupal Guilds Discussion Today! (289,490)
- Built a New Widget! (239,942)
- Erik Gecas's Art Show (100,970)
- Drupal Multimedia Book Announcement at Drupal.org (90,488)
- Map a Video Feed! (87,491)
- YouTube Expands API: Good for Embedded Media Field (86,891)
- Special Needs Trust (82,872)
- Drupal, WordPress, or Joomla? (A Trick Question) (72,933)
- Inline Video with jQuery Media! (68,598)
- Drupal will Explode your Site into a Million Pieces, and Why You Want That. (65,615)
- How to Use jQuery Media for Audio & Video (62,399)
- Cufón, an Alternative to sIFR for Image Replacement (59,421)
- Site Hacked? Read Cracking Drupal! (51,497)
- How to Handle Large File Uploads? (50,111)
- Media Code Sprint (January 2009) (49,687)
- Do YouTube With Drupal (49,232)
- Views Slideshow for Views 2 (48,547)
- Drupal Media + YouTube + WYSIWYG (48,029)
- Home-Brewed Drupal Media Player in the Works! (43,939)
- Minimalist Drupal Themes (43,276)
- Embedded Media Field a Media Essential (41,576)
- Media Code Sprint (Top 3 Goals) (41,203)
- YouTube API for Drupal on the Way! (40,089)
- How to do the YouTube Video Cycle! (37,385)
- JavaScript Theming, a Paradigm Shift (34,737)
Comments
Issues ?
about few issues:
Copy and paste doesn't always work... But do we really need it ?
Also when cufon converted text is made a link, IE7 allows to click on the letters only (whitespaces - like i.e. inside of O, 0 ets, or gaps between letters are unlinked. With thin fonts it makes it difficult really)
I am still working on workaround.
Copyright issue - majority of fonts have their free version - easy to overcome.
Other than that, it is great, and caters perfectly for all my needs. Even works ok with IE6..
I'd defo. reccomend it.
collapsible fieldsets bug
I've noticed that when Cufón is activated in Drupal 6.1.3 all my
collapsible fieldsets are expanded and the toggle control to expand/
contract is unpredictable. There seems to be a conflict with
jquery.js and Cufón are loaded together. I don't think this problem is
specific to Drupal version 6.1.3 but that's what I'm running...
To be more specific, I'm referring to the collapsible fieldsets that
appear on post/edit content pages and elsewhere in the Drupal core..
Cufon module in the wild
I released a Cufon module today that provides a minimalistic implementation for Drupal (it searches your theme folder and sites/all/libraries + sites//libraries ala WYSIWYG for font definitions and provides a dead simple selector / font configuration system).
It uses the approach recommended by the latest usage guide, which as Peach pointed out, explicitly recommends NOT initializing Cufon on document ready.
Hopefully this doesn't get me on the duplicated modules wall of shame. I don't personally see a big problem with having multiple implementations for multiple methods (especially because mixing approaches to text replacement seems highly unlikely -- I assume most sites will pick one and stick with it), and I've had good luck of some of the others (especially Signwriter).
Step #4 in module instructions
I'm a little unclear on step #4 in your notes:
"Configure Cufon by associating a font family with a jQuery selector in admin/settings/cufon."
can you give an example of a selector?
Cofon module instructions
Yes!
Please give us an example of how to write the JQuery selector in admin/settings/cufon.
I installed the module, scripts, font, and all but I can't get it to work.
Thanks!
If you want to replace the
If you want to replace the first, second, and third level headers, and your entire body with cufon, your selector to enter into the Drupal cufon module would be:
h1,h2,h3,body
collapsing fieldset issue
have you noticed the fieldsets are all expanded on admin pages? and the toggle function is wacky?
Tried your module, fieldsets
Tried your module, fieldsets are still not collapsing. any ideas?
Good catch, please file a bug report on Drupal.org
I just noticed that part of the Views UI seems to be adversely affected by the presense of Cufon as well. It seems that Cufon is messing up visibility toggling, but at the moment, I'm strictly guessing.
That said, you should post this in the Cufon project issue queue, and not clutter up a thread about Mr. Winborn's approach (which is perfectly sound) with problems in my code.
Submitted bug
You can find this report here: http://drupal.org/node/520210
Also, do you think it will be helpful to also submit this to the Cufón project?
Cufón ftw!
Wow, that's exciting! Thanks for the great work, David. And don't worry if the module does end up on the "wall of shame"; I see that as a useful tool actually, as it exposes the differences in approaches as well as the similarities, and helps people make more informed choices. I've had a couple of my own modules posted there, and I know of a couple of more that should be...
document ready
Hey mate, thx for the tutorial.
I was just reading up on Cufon and I noticed that against recommendation you load Cufon in a Document.ready wrapper. It says on their website this may cause flickr for internet explorer users because it substitures the use the the Cufon.now function..
"You should not place Cufon.replace inside $(document).ready or similar functionality because it will make Step 4 ineffective."
http://wiki.github.com/sorccu/cufon/usage
thaaaanks a lot! for sure
thaaaanks a lot!
for sure will be very useful!
Thanks a million!
Sifr has frustrated me for the last time.
Your instructions are easy to follow and worked for me straight away.
Thanks!
Thanks for sharing! So much easier than siFR.
Text selection an issue
Cufón seems lovely and useful. I would like remind everyone that text selection can be important to visitors, and Cufón seems to disallow this (as would any image replacement without special compensation.) So if you ever want your visitors to be able to select a whole document, including Cufón-replaced headings, be aware they probably won’t be able to do so.
Actually, I've confirmed that
Actually, I've confirmed that Cufón allows text selection in FF 3.0 and IE7. Their site says it doesn't work yet in Opera. But that's probably good enough for a large number of sites.
Signwriter and Flir
You can try these alternatives as well:
Signwriter
Facelift Image Replacement Integration
FLIR fails in Opera 9.5 (latest release)
Just a heads-up that FLIR’s official demo page fails in Opera, but Cufón works fine.
Wow, I just googled FLIR
Wow, I just googled FLIR earlier today. Thanks for the links! Though this is beginning to look a little like something for the Duplicated Modules Hall of Shame...
Don't think should consider
Don't think should consider them duplicate, as each employ different methods of generating the font, which I find each has its application area. Just like Sifr is not the solution for everything. ;-)
Legal Issues
Very interesting, I like this approach. The one catch about this issue is that (and correct me if I'm wrong) that because the font itself is being made available (though it is converted, I'm sure it can be converted back by a visitor locally) that this might not be in compliance with the licensing terms of commercial, proprietary fonts. Aside from that issue, this looks very neat, thanks for sharing.
Yes, that can be an issue in
Yes, that can be an issue in some cases. In fact, on the page where you can convert your fonts to Cufon, you have to specify that the font may be embedded for use on the web.
Still, there are usually public domain alternatives in most cases. For someone where licensing is an issue, sIFR and TextImage should continue to be viable alternatives.
Some interesting things I
Some interesting things I noticed in the "Known issues":
* Firefox 1.5 and 2.0: you must use a strict doctype.
* Internet Explorer: should you not call Cufon.now() just before the closing tag, there might be a short, visible delay before the text is replaced.
Thanks, I skimmed over that
Thanks, I skimmed over that part. Shouldn't be a problem in the example as I gave it, because the default garland theme uses strict doctype (not sure about zen offhand), and I'm putting the script in the header. But thanks for the heads up, good for people to be aware of if they're doing fancy theme work or scripts at the end of page load.
Features?
Interesting! Despite its progress, I still can't warm up to sIFR since you can't middle-click links!
I saw they have :hover effects coming as a feature... but they don't seem to link a demo of this. Does it work for links? Middle clicking links?
I don't know if Cufon works
I don't know if Cufon works with middle clicked links. If someone experiments with this before I get a chance, maybe they can comment in this thread?
Thanks.
Doh! I forgot that I have
Doh! I forgot that I have Cufon installed on this page... Test for yourself...
Yes, middle click seems to
Yes, middle click seems to work fine... ;)
Textimage module?
Hi Aaron,
Thank you for bringing this up as a valid alternative for sIFR. I wonder how this module compares to the complete image-replacing textimage module for instance. Why do you prefer the javascript-based replacement over direct image generation?
Line breaks
Complete image replacement (of the entire text block) doesn't work particularly well for multiple line blocks particularly in dynamic width layouts where the placement of the line breaks may change based on the user's interaction with the page.
As Jeff pointed out, Cufon
As Jeff pointed out, Cufon splits the images into words, so that it wraps properly on smaller screens. Additionally, in IE7, you can select the text. The project page promises future support for text selection on other browsers as soon as they figure out Opera (and they have solutions for the other browsers already in the works).
I also just tested and see
I also just tested and see that select/copy/paste works as well in FireFox... Nice!