jQuery

You should check out "Use the Best Available Ampersand" from SimpleBits. I love me some ampersands, and that post is a great resource for prettifying your site's ampersands with a little CSS typography.

Along the lines of last week's jQuery "widon't" post, you can offload some of the typography processing to the browser. It's really slick and simple if you have jQuery enabled.

To use some of his ampersandy style goodness, add this JavaScript snippet to your site somewhere:

jQuery(function($){
 
$('h1,h2,h3,h4,h5,h6').each(
    function(){
        $(this).html($(this).html().replace(/&amp;/g,'<span class="amp">&amp;<\/span>'));
    }
);
 
});

Then simply add a few CSS font style rules to your site's stylesheets for span.amp, and you're set.

If you want to be really rad, you could combine this with widon't, like so:

jQuery(function($){
 
$('h1,h2,h3,h4,h5,h6').each(
    function(){
        $(this).html($(this).html().replace(/&amp;/g,'<span class="amp">&amp;<\/span>').replace(/\s([^\s>]{0,10})\s*$/,'&nbsp;$1'));
    }
);
 
});

Now your website is 2x hotter, guaranteed :)

Updated, per Paul's comment, to use jQuery's $.html instead of manipulating innerHTML on the actual DOM elements. Also updated to use a DOM ready callback, making it easier on folks who just want to copy/paste these snippets into their site.

In the interest of more attractive Internets, here's a quick little javascript "widon't" snippet—written in jQuery—that I've been using. Now go do something cool with it.

jQuery(function($){
 
$('h1,h2,h3,li,p').each(
    function(){
        $(this).html($(this).html().replace(/\s([^\s<]+)\s*$/,'&nbsp;$1'));
    }
);
 
});

Feel free to replace or augment the selector ('h1,h2...p') with any additional elements you'd like to see widon'ted.

I actually use this variant, which lets longer words be widows if they wanna:

jQuery(function($){
 
$('h1,h2,h3,li,p').each(
    function(){
        $(this).html($(this).html().replace(/\s([^\s<]{0,10})\s*$/,'&nbsp;$1'));
    }
);
 
});

Note: Dave Cardwell posted a jQuery widon't a couple of years ago, but holy balls it's big... If you want something a bit more robust, be sure to check his out.

Another note: I added newlines and tabs to make the code more readable. If I were you, I'd remove those bad boys before deploying.

Update: I wrapped the snippets in a DOM ready callback, making it easier for those who just want to copy/paste these snippets into their site.

Like most Drupal hackers, I love to hate jQuery. The primary reason for this is that the version of jQuery included in Drupal core is always several versions behind where it should be. Unfortunately updating it is a serious undertaking, usually reserved for the next Drupal version. To get us by between releases, there's a module called jQuery update. It's pretty rad. It replaces the core jQuery dependencies with a newer jQuery version. It has one caveat though:

The tricky step with this module is that you will need to *replace* the jquery.js file in core with the jquery.js file included in the jquery_update directory...

In Drupal, messing with core files is poor form. Not only does it mess up the upgrade path, it causes all sorts of discontent in a multisite environment. And I spend most of my time in a multisite environment.

my fix for jQuery update in multisite drupal after the jump.