more jQuery typography

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.