Ampersands & Javascript

While playing around with Antique¹, I decided I really wasn’t in love with the ampersands that were included in any of the fonts I was working with. Normally, I’d just run everything through Typogrify² and get some handy CSS classes to work with. Working in Safari’s Reader, though, I only had access to Javascript (and jQuery, now).

I set out on a search for an easy, all-purpose solution, but nothing worked as well as I wanted it to. So I did a little scavenging and put together a couple of functions that do the job pretty well. They use jQuery, but could just as easily be done with pure Javascript, if you really wanted to.

Here are the two functions I’m using in the latest (unreleased, at this moment) version of Antique:

function fixAmpersands() {
	// entity encodes only ampersands that aren't already encoded
	$("h1,h2,h3,p:contains('&')", document.body).each(function() {
		if( this.nodeType == 3 ) {
			// regex from Stack Overflow http://bit.ly/aJZVCG
			$(this).html( $(this).html().replace( /&(?![a-zA-Z]{2,6};|#[0-9]{2,4};)/g, "&" ) );
		}
	});
}
function dressUpAmpersands() {
	// adds a span with class 'amp' to the entity-encoded ampersands
	$("h1,h2,h3,p:contains('&')", document.body).each(function() {
		$(this).html( $(this).html().replace( /&amp;/g, "<span class='amp'>&amp;</span>" ) );
	});
}
$(document).ready(function() {
	fixAmpersands();
	dressUpAmpersands();
});

They seem to work pretty well, so far. I accompany them with some CSS I nicked from SimpleBits and Patrick Haney:

.page span.amp { 
 	font-family: Baskerville, Palatino, Constantia, "Book Antiqua", "URW Palladio L", serif;
	font-style: italic;
}

In my situation, it doesn’t really matter if ampersands are captured within code blocks, but just to keep styling consistent, I also force any .amp-wrapped ampersands within pre and code blocks to match the pre/code styling:

#article .page pre,#article .page code,.page code span.amp, .page pre span.amp {
	font-family: 'Droid Sans Mono', 'Andale Mono', 'Courier New', Courier, monospace !important;
	font-style: normal;
}

Of course, this is all really better handled server-side with, say, PHP, but if you’re looking for spicy typography and are limited to client-side solutions, give it a shot! I’m running these right before my rather wicked new version of widon’t which splits long titles into nearly equal-length lines… more on that soon.