The best available &

Richard Rutter and Mark Boulton presented Web Typography Sucks at SXSW on Tuesday. Despite Joe Clark’s nit, this looks to have been a fantastic session. Richard — with Steve Marshall — is responsible for The Elements of Typographic Style Applied to the Web, a fantastic adaptation of Robert Bringhurst’s classic The Elements of Typographic Style to the web domain.

In their presentation, Richard and Mark consider EoTS’ principle 5.1.3: In heads and titles use the best available ampersand (slides 17–21). Dan Cederholm serves as an example of this princple in action:

Wow. Isn’t that beautiful? Now I’d love to do this sort of thing here, but I’d really rather not have to type <span class="amp">&amp;</span> instead of &, not to mention the years and years of documents to change. Also, I usually use atom:title with @type="text" when naming entries, where markup is a no-no. Sounds like a job for some DOM scripting!

Coding

First off, I create an element with an ampersand inside — we’ll clone this guy each time we need one.

NiceAmps.AMP = document.createElement('span');
NiceAmps.AMP.className = 'amp';
NiceAmps.AMP.appendChild(document.createTextNode('&'));

Next, the meat of it all, a function to frob the ampersands under an arbitrary DOM node.

/* frob ampersands in text in or under the given node */
NiceAmps.frobNode = function(n) {
  if (n.nodeType == 3) { /* text nodes */
    var offset = n.data.indexOf('&');
    if (offset > -1) {
      var n2 = n.splitText(offset);
      var n3 = n2.splitText(1);
      n.parentNode.insertBefore(NiceAmps.AMP.cloneNode(true), n2);
      n.parentNode.removeChild(n2);
    }
  } else if (n.className != 'amp') { /* don't frob inside AMP */
    for (var i=0; i<n.childNodes.length; i++) {
      NiceAmps.frobNode(n.childNodes[i]);
    }
  }
}

Here’s how to use the above NiceAmps.frobNode on all the headings in a document.

/* frob ampersands in h[123456] */
NiceAmps.frobHeadings = function() {
  var heading_names = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
  for (var i = 0; i<heading_names.length; i++) {
    var headings = document.getElementsByTagName(heading_names[i]);
    for (var j = 0; j<headings.length; j++) {
      NiceAmps.frobNode(headings[j]);
    }
  }
}

Just kick off NiceAmps.frobHeadings from window.onload and you’re all set — ampersands in headings will be instrumented for styling. Speaking of which…

Styling

Dan’s ampserands are set in Goudy Old Style — the same font I’m using for headings in my recent site refresh. Here’s the full font-family cascade I’m using for headings:

h1, h2, h3, h4, h5, h6 {
  font-family: "Goudy Old Style", Garamond, Georgia, Times, serif;
}

At first, I just threw font-style: italic on .amp, but I had forgotten about the cascade — when Goudy Old Style isn’t available, I fall back on Garamond, whose italic ampersands are completely horrible to behold:

Clearly, I needed to come up with a different cascade for this. After some trial-and-error and playing with the font dialog in TextEdit, I ended up with… precisely the same cascade as on slide 21. Hrumfh.

/* "In heads and titles use the best available ampersand"
 *     — EoTS 5.1.3
 */
h1 .amp, h2 .amp, h3 .amp, h4 .amp, h5 .amp, h6 .amp {
  font-style: italic;
  font-family: "Goudy Old Style", "Palatino", "Book Antiqua", serif;
}

Well, anyway, there you have it. Share and Enjoy!