Check marking visited links
For a little side project I’m working on I was experimenting with different ways of displaying visited links. I thought about using the method Simon Collison describes in Ticked-off visited links Reloaded, but didn’t want to start creating background images.
So I started playing with the :after pseudo-element and generated content. Nope, neither works in you-know-whatInternet Explorer, but it’s about time to stop letting that prevent things from moving forward. Anyway, looking through the Unicode Character Code Charts I found character 2713 (check mark), which seemed to be just what I wanted.
Inserting one of these characters after visited links would result in an effect similar to Simon’s ticked off links, so I added the following (simplified) rule to the stylesheet I was working on:
h2 a:visited:after {content:"\00A0\2713";}
When using unicode characters with generated content you enter a backslash followed by the hexadecimal character code. In this rule there are two characters: first a non breaking space to push the check mark away from the link text, and then the check mark.
I tested this in a whole bunch of browsers on my Mac and they all displayed the check mark just like I wanted it. Perfect! But then the trouble started.
When I opened the site in Firefox on a Windows machine there was a question mark instead of a check mark. And Opera displayed an empty square. But no check mark.
“Ok, it must be the font then”, I thought and changed the font-family for the check mark to WingDings. Nope, didn’t help. Tried another font. And another. Still no check mark.
Googling around a bit revealed that of course I wasn’t the first to think of using generated content to insert check marks after visited links. Mike Davidson describes the same technique and similar problems in Making Visited Links Radical.
Mike notes in the comments that only Safari renders the check mark. Now, that article is from over a year ago so browser support may have improved – the proper check mark seems to display perfectly in all recent Mac browsers. No luck at all on Windows, though. Mike’s workaround was to use character 221A (square root or radical sign) instead, since that seems to display properly across browsers and operating systems.
That’s where I’m stuck for now. Like Mike I have resorted to using character 221A (square root or radical sign) instead of a real check mark. For a demo, check out Coffee with milk, my design for the CSS Table Gallery. Note: The table design uses a radical sign, not a check mark, so it does work in Windows browsers (except IE).
And no, that isn’t the side project I was talking about earlier. More on that later.
Not being able to use any character I want is a bit annoying. This problem does not seem to be isolated to generated content either, so I was wondering if anyone has any ideas on how to make Windows browsers display proper check marks.
- Previous post: Typetester
- Next post: Opera is now a free browser
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
I took a look at Coffie with milk and it worked perfectly in my Firefox 1.0.6 and Opera 8.02 both on WinXP SP2 (both showed checkmarks). MSIE showed though nothing.
Waldek: Right. That's because I'm using a radical sign instead of a check mark. ;-)
2713 works in both Firefox 1.5 Beta 1 and Opera 8.02 on Windows XP SP2. No luck in IE6 though.
It works in IE if you select a font that actually contains the character, such as "Arial Unicode MS". The problem is that such fonts are not installed by default on Windows and, thus, may not be available to the user.
Like Adam, I see the check mark, ✓ (\2713) in Firefox and Opera in Win98se and in Debian Gnu/Linux. It looks much better than the radic.
I can't believe I didn't think of that myself.
gary
Sorry if this is a stupid question, I'm not very familiar with the :after pseudo selector and was wondering whether it could also be used to add a suitable character during a:hover ? I suppose I should go and have a play really...
Lachlan Hunt says:
I've tried this in IE6 some time ago, but never got it working. I was under the impression that generated content does not work in IE6?
I actually do somewhat the same thing at my website at http://www.dev-news.com
It's a nice effect, just using CSS. hey, remember when we had to use JavaScript for all this?
Roger Karlsson (comment 7), I was referring to the character rendering correctly in IE with an appropriate font available, not the ::after pseudo-element working (which, you are quite correct, doesn't work in IE)
The problem is, until unicode fonts are more widely available, we can't really depend on characters like this working. The alternative is to use an image in place of the character and include it like this:
:visited::after { content: url(/images/check-mark); }
Hi, why don't you use :visited { background:url(chechmark.png) no-repeat right 50%; padding-right:width-of-png; }
This might sound far-fetched, but can the character encoding of the page have something to do with it? I mean, ISO-8859-1 instead of UTF-8 etc...
Lachlan: Thanks, that explains why I didn't get it to show up on the default Windows XP installation I used for testing.
On the Mac, when the specified font doesn't contain the character, browsers seem to find a font that does and use that instead. Or maybe they just default to Lucida Grande, which is a Unicode font.
Chris: Because I was trying to avoid using background images :-).
If you don't like opening the PDF:s at unicode.org there is a site that I have found useful: FileFormat.Info - file format information and conversions where you can search for unicode characters and see if they will show up in your browser. Very useful.
Oh and I still think my table style was prettier ... ;)
Using background images is legitimate (and currently more workable), using generated content is more elegant.
Robert: I doubt character encoding has anything to do with it. I use UTF-8 in the side project I mentioned.
Mats: Thanks, that looks very useful.
And I'm sorry, but I don't agree. My table design looks better to me ;-).
Jens: Correct. Another reason I want to use generated content is that it will let the check mark scale with the text, which background images will not.
Not to be overly nagging about it, but I've had scenarios in Content Management solutions with a number of characters that haven't worked with UTF-8, but worked fine with ISO-8859-1.
So try changing encoding. If that doesn't work, I'll let you be. :-)
Yes, that's standard behaviour. As far as I know, all modern browsers, with the exception of IE, will do that. At the very least, Firefox and Opera do so on Windows.
Robert Nyman (comment 11), character encoding has absolutely nothing to do with this issue. If, however, in the CSS, the real character was used instead of the escape sequence, there's a possibility that encoding issues may have an effect, but not in this case.
Also, the problems you describe in comment 16 only occur when you incorrectly label a file as being encoded as UTF-8, even though it's really encoded as ISO-8859-1 or Windows-1252. Please read my guide to unicode for more information.
Not sure about the root sign idea. We use meaningful HTML, but then add "root" because it looks a bit like a check mark?
I know we're at the bleeding edge anyways with :after and unicode stuff, but it seems contrary to what we're trying to do nowadays.
Funny, just last week I created a nice design using check marks; but no, sadly I couldn't make IE6 play nicely. It worked in Opera and Firefox though, so it's not solely the platform that's the problem.
I suspect IE uses a different base font which doesn't include the full unicode character set, but the project had a very short deadline so I didn't have time to investigate. Perhaps a font replacement method might be the solution.
Small Paul: IMO, anything goes in CSS.
Nobody except a human (or screenshot generator) is ever going to "see" the results; characters in CSS have no meaning besides their appearance. Whether it's a check mark or just looks like one is completely irrelevant.
Brendan: I see where you're going. If you're right, people should be very careful (in future, given IE's current lack of CSS-generated content support) to only generate 'decorative' content via CSS.
I guess as pages should make sense with CSS turned off (as per the WCAGs), that's required anyway.
It might be more than you need, but have you thought about using sIFR?
I do know that this is not what you are looking for, but I thought I'd make a post anyhow.
You could try to depict a checkmark by using alternate characters more commonly available in the latin1 charset.
I was first experimenting with variations of slashes in order to create a checkmark (\/). I could not use multiple
contentproperties (one on the actual element and one on a class), hence an inability to create variations in font sizes (I wanted the leading slash to be about half size of the trailing backslash).Another variant is to use a small, sans-serif, capitalized and italic
V.This seriously funks up rendering in IE though :)
I think sIFR would be kind of overkill for this ;-)
Nobody except a human (or screenshot generator) is ever going to "see" the results; characters in CSS have no meaning besides their appearance. Whether it's a check mark or just looks like one is completely irrelevant.
telewizory lcd: Tell that to a typographer. Besides, the radical sign doesn't really look like a check mark.
I am in the middle of a redesign of my doing business in Japan site and trying to find a nice way to indicate visited links. The site is not large (about 70 pages) but has a lot of reference information and takes a few hours to read through. A lot of the visitors are executives who may come back to the site 5 or 6 times and get frustrated revisting pages. Of course most of them use IE 6 on PCs!
I am trying some experimenting with the encoding of the pages to see if I can get this check-mark technique to work (the displayed ? is a typical indication of an encoding mismatch). We get these problems all the time when working on Japanese sites.
Thanks for a great article.
Sorry, comments are closed for this post.