Andy Davies

Web Performance Consultant

Implementing Sparkicons

A few days ago, Mark Boulton bounced around the idea of Sparkicons, small inline icons at the end of links, that indicate what's on the end of a hyperlink.

Based on meta-data attached to a link, the Sparkicon could indicate the link is to a PDF, or a video, or a discussion thead. It could also include addition information such as how long a video is or how many comments there are in a discussion thread.

This is one way they could be implemented...

Adding meta-data to <a> element

As there aren't any suitable standard attributes to store Sparkicon meta data in, I used data- attributes:

  • data-sparkicon - content type e.g. video, music, pdf, comments
  • data-sparkicon-plus - optional extra detail to display e.g. length, size, number of comments

Displaying the Sparkicon

The Sparkicon is inserted using the CSS :after pseudo selector, so it should degrade gracefully in browsers that don't have CSS content support:

a[data-sparkicon$="media"]:after {
  content: " >" attr(data-sparkicon-plus);
  font-size:xx-small;
  vertical-align:top;
  font-family: sparkicons;
}

@font-face {
    font-family: "sparkicons";
    src: url("data:font/truetype;base64, base64 font data goes here, 
      but you don't have to use a dataURI..."");
}

WARNING: Supporting webfonts across all browsers isn't as simple as it might be so while a dataURI is great for demo purposes slightly more complex syntax will be need in real life!

The HTML is straightforward, with the data- attributes added to the anchor element:

<a href="http://www.youtube.com/watch?v=9sSc5ZPK7P8"
  data-sparkicon="media" data-sparkicon-plus="12:02">Rugby World Cup Highlights</a>

The font used has just numbers, a colon and an icon for video (mapped to >).

Ta Da and Boo!

The final result looks pretty good:


The combination of font-size: xx-small and vertical-align: top results in the underline on link under the Sparkicon being disjointed in WebKit browsers (vertical-align: super doesn't improve things). Firefox 12 and IE9 don't suffer from this issue.

If you want to look at the result or play with the code it's on jsFiddle: http://jsfiddle.net/andydavies/GKdDy/

DRYing Out and Fixing the Baseline Problem

Another issue with the example above is that each Sparkicon type requires its own CSS selector and as the number of Sparkicons rises so does the number of CSS selectors.

CSS pre-processors can help manage this and make it maintainable but font ligatures provide another alternative.

Using ligatures for each Sparkicon type e.g. chat, video, music, allows data-sparkicon to be used directly.

a[data-sparkicon]:after {
  content: " " attr(data-sparkicon) attr(data-sparkicon-plus);
  font-family: sparkicons;
}

Creating a superscript font based on GG Superscript Sans simplifies the CSS further and fixes the underline issue in WebKit too.

Using a single CSS selector we can now specify different Sparkicons for multiple links:


Again the code is on jsFiddle http://jsfiddle.net/andydavies/Cg5RQ/

Final Thoughts

I like the idea of Sparkicons, I guess what we need now is real world usage to understand how it affects visitor experience.

This is a prototype, so if you're planning to take this approach further there's a few things to keep in mind.

It needs a thorough test across multiple browsers, some browsers don't support the CSS content pseudo selectors e.g. IE8 but can be polyfilled (or left to degrade gracefully). I tested in on Chrome, Safari and Firefox on OSX and IE9 on Windows (dataURI definition isn't correct for IE9 though.)

I could't find any way to keep the underline on the main link but remove it from the Sparkicon, text-decoration: none seemed to have no effect. Somewhat confusingly I could specify a different colour for the Sparkicon though!

In the future it might be possible to use normal fonts and do away with the superscript font. CSS3 Fonts specifies font-variant-position: super for superscript but it's not implemented by any browser yet.

Finally, icons are really not my forte so it'd be great if someone could produce a demo with decent icons!

Comments