Amperbbreviations

Twitter doesn’t allow for much verbosity but sometimes it’s possible to squeeze some code into 140 characters or fewer. I particularly like Simon’s piece of JavaScript. Paste this into the address bar in Safari:

javascript:(function(){var d=0;setInterval(function()
{document.body.style['-webkit-transform']=
'rotate('+ d +'deg)';d+=1},10)}());

Earlier today, I wrote:

Writing &amp;</abbr> in my markup and abbr[title='and'] { font-family: Baskerville; font-style: italic; } in my CSS.

This is something that Dan has written about in the past, citing Bringhurst; In heads and titles, use the best available ampersand. Dan suggested wrapping ampersands in a span with a class of “amp” but in a comment, I proposed using the abbr element:

&amp;</abbr>

But really, you don’t even need the class because you can just use an attribute selector:

abbr[title='and'] {
 font-family: Baskerville, Palatino, "Book Antiqua", serif;
 font-style: italic;
}

But, asks Mat Marquis, what about a certain browser that can’t even handle the simplest of attribute selectors? Won’t IE666 still need a class attribute?

Well, it turns out that you can’t style the abbr element in the Browser of the Beast with or without a class attribute. That’s because Internet Explorer didn’t support the abbr element until version 8 (and yet people scoff at the 2022 date for two complete HTML5 implementations). If you want to slap some sense into earlier versions of IE, you can always use a smattering of DOM Scripting.

Bruce wonders:

Is there not some JS that can quietly add class=”and” when it sees an ampersand in a text node ?

Turns out that Tess has already written a script to do that.

If you want to be a real stickler, Erik Vorhes keeps his tongue firmly in cheek with this suggestion:

&amp;</abbr>