Amperbbreviations

September 21st, 2009

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 <abbr title="and">&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:

<abbr title="and" class="amp">&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 Ted 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:

<abbr title="et" lang="la">&amp;</abbr>

11:48pm

Tagged with markup css typography ampersand

Illustrations

Thanks to the magic of machine tags, you can illustrate this post by tagging a picture on Flickr with:

Related

Links

Find links I've tagged with markup, css, typography, ampersand, etc.

Photos