tags:

views:

7445

answers:

6
+3  Q: 

Tick symbol in HTML/XHTML

We need to display a tick symbol within an internal web app and would ideally like to avoid using an image.

Has to work starting with IE 6.0.2900 on a XP box, ideally we need it be cross-browser (IE + recent versions of FF).

The following displays boxes although sets browser encoding to UTF-8 (META works nicely and not the issue). The default font is Times New Roman (might be an issue, but trying Lucida Sans Unicode doesn't help and I don't have neither Arial Unicode MS, nor Lucida Grande installed).

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
 &#10003; &#10004;
</body>
</html>

Any help appreciated.

The following works under IE 6.0 and IE 7:

<html>
<head>

</head>
<body>
 <span style="font-family: wingdings; font-size: 200%;">&#252;</span>
</body>
</html>

I would appreciate if someone could check under FF on Windows. I am pretty sure it won't work on a non Windows box.

+9  A: 

I think you're using less-well-supported Unicode values, which don't always have glyphs for all the code points. Try ☐ (which is 0x2610) and ☑ (0x2611). Or, alternatively, ✓ (0x2713) or its heavier cousin, ✔ (0x2714).

Edit: There seems to be some confusion about the first symbol here, ☐ / 0x2610. This is an empty (unchecked) checkbox, so if you see a box, that's the way it's supposed to look. It's the counterpart to ☑ / 0x2611, which is the checked version.

John Feminella  2009-03-18 12:30:14
These look as boxes to me.
Totophil  2009-03-18 12:44:59
You're on Win98???
vartec  2009-03-18 12:53:54
Corporate setup: Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300
Totophil  2009-03-18 12:55:40
XP has unicode fonts. This should work without problems.
vartec  2009-03-18 13:00:26
Doesn't work on FF 3.0.6.
Ian Kemp  2009-03-18 13:16:06
The first is a box to me, the rest work fine. Although, I'd use an image instead, just to be sure.
GoodEnough  2009-03-18 13:42:12
Just to be clear, the first image is supposed to be a box -- it's an empty checkbox!
John Feminella  2009-03-18 13:46:22
John, they all look like the same looking box to me, the kind you get displayed then the font doesn't contain a certain glyth.
Totophil  2009-03-18 13:50:58
@Totophil: Ah, okay. I'm using Ubuntu, and the default sans font that I configured in FF has these glyphs. In Windows, just use the character map to look up these glyphs and see if your desired font has them. If not, you'll need to pick a different one.
John Feminella  2009-03-18 13:53:06
@John, thanks! Well yes, WingDings got the tick glyph, but really this is not much better solution than using a specific font under Linux.
Totophil  2009-03-18 13:56:46
They all look like boxes for me on IE6.
Bart S.  2009-03-18 14:21:29
In safari 4 on mac os, these all work
Perchik  2009-03-18 14:32:42
None of these work for me in IE7 on XP - they all display as boxes.
Rich  2010-08-04 07:07:42
just switch the font to "MS Gothic" :)
Andy Li  2010-08-13 08:47:15
+2  A: 

The client machine needs a proper font that has a glyph for this character to display it. But Times New Roman doesn’t. Try Arial Unicode MS or Lucida Grande instead:

<span style="font-family: Arial Unicode MS, Lucida Grande">
    &#10003; &#10004;
</span>

This works for me on Windows XP in IE 5.5, IE 6.0, FF 3.0.6.

Gumbo  2009-03-18 12:30:26
Haven't got either font, only Lucida Sans Unicode that remotely looks like unicode font but it doesn't have the ticks.
Totophil  2009-03-18 12:44:26
Then list some fonts that have a glyph for this character: `font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande`.
Gumbo  2009-03-18 13:12:27
Gumbo, doesn't work. Besides I don't have Arial Unicode MS and Lucida Grande installed.
Totophil  2009-03-18 13:49:04
It's about as close as you're going to get, but unfortunately Lucida Sans Unicode doesn't supply U+2713/2714.
bobince  2009-03-18 14:18:04
A: 
solomongaby  2009-03-18 12:31:24
Solomongaby, thanks. But look as boxes to me on IE6.
Totophil  2009-03-18 12:45:30
+1  A: 

Would √ (square root symbol, &#8730;) suffice?

Alternatively, ensure you're setting the Content-Type: header before sending data to the browser. Merely specifying the <meta> content-type tag may not be enough to encourage browsers to use the correct character set.

Ian Kemp  2009-03-18 13:31:32
Thanks! Square root works, but looks a bit like errr... square root? But I guess in the absense of alternative that would probably be as close as it gets.
Totophil  2009-03-18 13:42:46
Btw, specifying the meta tag sets UTF-8 nicely on mine IE, so in this case that's not the issue.
Totophil  2009-03-18 13:43:58
+1  A: 

although sets browser encoding to UTF-8

(If you're using numeric character references of course it doesn't matter what encoding is being used, browsers will get the correct Unicode codepoint directly from the number.)

<span style="font-family: wingdings; font-size: 200%;">&#252;</span>

I would appreciate if someone could check under FF on Windows. I am pretty sure it won't work on a non Windows box.

Fails for me in Firefox 3, Opera, and Safari. Curiously, works in the other Webkit browser, Chrome. Also fails on Linux (obviously, as Wingdings isn't installed there; it is installed on Macs, but that doesn't help you if Safari's not having it).

Also it's a pretty nasty hack — that character is to all intents and purposes “ü” and will appear that way to things like search engines, or if the text is copy-and-pasted. Proper Unicode code points are the way to go unless you really have no alternative.

The problem is that no font bundled with Windows supplies U+2713 CHECK MARK (‘✓’). The only one that you're at all likely to find on a Windows machine is “Arial Unicode MS”, which is not really to be relied upon. So in the end I think you'll have to either:

  • use a different character which is better supported (eg. ‘●’ — bullet, as used by SO), or
  • use an image, with ‘✓’ as the alt text.
bobince  2009-03-18 14:16:46
A: 

Why don't you use the HTML input checkbox element in read only mode

<input type="checkbox" disabled="disabled" /> and
<input type="checkbox" checked="checked" disabled="disabled" />

I assume this will work on all browsers.

Drejc  2009-03-18 14:33:45
We don't need a control, just an indication that a certain option is available within a matrix. Using a disabled control would be wrong in this case.
Totophil  2009-03-18 14:36:29

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?