Tag Archives: html entities

Ticks Revisited

In a previous post I covered how we tackled the insertion of ticks (otherwise known as checks). Using conditional comments to feed a character entity to modern browsers while feeding a wingding character to IE6 was workable, but terribly unwieldy.

We forgot one very basic point: The tick is a graphic symbol and not a piece of content in itself.

Most other sites we tried to refer to simply dropped a graphic in the table cell. Using the appropriate alt text, it is somewhat accessible. Adobe has a great implementation which we have decided to emulate.

Inserting “Yes” into the applicable table cells makes it extremely semantic. Throwing in a class “yes” allows us to remove the text and replace it with a graphic via CSS.

<td class="yes">Yes</td>

The CSS:

Inserting tick marks (or checks if you’re American)

The HTML entity for a tick (or check, but we’ll call it a tick since we’re using British English) is &10003; which generates &10003; for those of you using a browser outside of the immensely popular, but oh-so-last-millennium Internet Explorer 6. IE6 renders a placeholder box as it does not recognise the entity.

What it does recognise is that the letter “P” in Wingdings 2, which also gives us a nice tick: P for your IE6 users. Modern browsers like Firefox 3 will probably not render wingdings, even if installed on the computer.

So we have conundrum, and it seems the only way is to produce forked code, using conditional comments.

Doogal Bell has a good blog post on inserting tick marks, but I feel his use of the input field to generate a tick isn’t particularly semantic, so I’m sticking with Wingdings for the IE6 crowd.

So ultimately we have:

<![if !IE]>✓<![endif]>
<!--[if gt IE 6]>✓<![endif]-->
<!--[if lt IE 7]><div style="font:bold 1.2em 'wingdings 2'; text-align: center;">P</div><![endif]-->

If you’re not using an IE browser, feed the proper HTML entity &10003;. If you’re using an IE version greater than IE6, also feed the proper HTML entity. If you’re using an IE version less than 7, feed a div with inline CSS specifying Wingdings 2 as the default font, bold for a little extra weight and aligned centre. Yes I know the inline CSS is as evil as font tags, but if I’m going to be specifying the wingdings font, I may as well format it right.

Note to self: I should apply the same text formatting on the HTML entities, but in the system css files, targeting content inside table cells.