12

I'm wanting to use the characters ✖ (U+2716) and ✔ (U+2714) in my CSS for form validation purposes. Basically, if a field is valid/invalid, I use the after pseudo class to insert the corresponding symbol after the field.

For example:

.field:after {
  content: "\2716";
}

This is working great on my Mac, but when I switch to my Windows XP VMWare instance, I don't get the characters, no matter what font I choose (even Arial).

My suspicion is that perhaps my Windows VM isn't configured properly, but that causes me to be weary of using these characters at all.

Does anyone know if there are "safe" characters or ranges in unicode that you can reliably assume will be viewable by most people?

UDPATE:

Here is a list of unicode characters I was hoping to possibly be able to use as icons. Specifically the dingbats section. http://en.wikipedia.org/wiki/List_of_Unicode_characters#Dingbats

If you don't see these characters on your machine, definitely let me know in the comments.

1

2 Answers 2

10

In addition to the problems of using CSS for presenting essential information (see CSS Caveats), there’s the problem that the characters mentioned are often not available in people’s computers. The fonts supporting them do not contain any font that is shipped with a Windows system, for example. Support exists in Arial Unicode MS, which is shipped with Microsoft Office, but not everyone is using Office.

Besides, the symbols are not universal. A symbol like “✔” meant wrong when I was at school.

Using “OK” and “error” might be best, unless you need to use some other language.

4
  • 1
    ...that, or graphical symbols in background-images. They bring their own problems, but they're definitely safer than Unicode characters
    – Pekka
    Jan 14, 2012 at 23:25
  • @Jukka that fileformat.info link is very helpful, thank you. Jan 14, 2012 at 23:27
  • Also, good point about the checkbox. I'm using the icons primarily as yet another visual cue, but I'll probably stick to only using the "X" icon for the error case. Most forms just use red text and a red outline, but that isn't helpful for people who are colorblind. Jan 14, 2012 at 23:29
  • www.fileformat.info is down for some time now. The link doesn’t work anymore.
    – fuxia
    Jan 22, 2012 at 16:46
0

What browser are you using in your XP VM? IE6 and 7 don't support the :after selector, so that might be the issue.

1
  • Yes, I know IE6 and IE7 don't support pseudo classes. I'm using IE8. I can see certain characters, just not those, so I know it's a font issue. Jan 14, 2012 at 23:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.