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.

Philip Walton
  • 29,693
  • 16
  • 60
  • 84
  • possible duplicate of [Which of the following Unicode characters should be used in HTML?](http://stackoverflow.com/questions/2702447/which-of-the-following-unicode-characters-should-be-used-in-html) (assuming that the main question here is about the safe ranges. If its about specific chars, possible duplicate of other things such as [this](http://stackoverflow.com/questions/4635683/detect-browser-character-support-in-javascript?lq=1).) – Ciro Santilli OurBigBook.com Jan 31 '14 at 16:23

2 Answers2

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • 1
    ...that, or graphical symbols in `background-image`s. They bring their own problems, but they're definitely safer than Unicode characters – Pekka Jan 14 '12 at 23:25
  • @Jukka that fileformat.info link is **very** helpful, thank you. – Philip Walton Jan 14 '12 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. – Philip Walton Jan 14 '12 at 23:29
  • www.fileformat.info is down for some time now. The link doesn’t work anymore. – fuxia Jan 22 '12 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.

Davy8
  • 30,868
  • 25
  • 115
  • 173
  • 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. – Philip Walton Jan 14 '12 at 23:00