CODEWITHSUNDEEP
htmlunicode
Ceilingfish
Ceilingfish

Reputation: 5455

Handling Unicode characters in HTML forms

I'm having a problem getting this unicode character to display correctly in an HTML form. Details of the character are here

It renders as 😄 instead. My HTML looks something like:

<!DOCTYPE html>
<html>
    <head>
        <style>
            input {
                font-family: 'Arial Unicode MS'
            }
        </style>
    </head>
    <body>
        <input type="text" value="😄" />
    </body>
</html>

That font appears to render the character correctly in Notepad, so I'm unsure as to why it wouldn't be rendered correctly in a web page.

The page is served with a Content-Type header of text/html; charset=utf-8. This only appears to affect Google Chrome (tested on version 32.0.1700.107). Screenshot is here

Upvotes: 0

Views: 2109

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

The problem (U+1F604 not shown, even in systems containing a font with a glyph for it; a small rectangle appears instead) is caused by a bug in font rendering in Chrome, and it affects normal text, too, not just characters in input boxes. The fix is to specify, in CSS, a list of font families that contain the character:

input { font-family: DejaVu Sans, Symbola, Quivira, Segoe UI Symbol, UniversaliaPlus }

Reorder the list as desired according to stylistic preferences, though fonts containing U+1F604 SMILING FACE WITH OPEN MOUTH AND SMILING EYES seem to have rather similar glyphs for this more or less iconic character. If you find other fonts containing them, add them to the list.

Beware that many users’ computers have no font supporting U+1F406. Some modern Windows systems have Segoe UI Symbol, and many Linux distros have DejaVu fonts (but a glyph for U+1F406 was added to DejaVu Sans relatively recently, in version 2.33.

General background and additional info: Guide to using special characters in HTML.

Note: I have rolled back an edit that added quotation marks around some font family names like DejaVu Sans. Such quotation marks are not needed (except for names with some special characters), by CSS3 rules or otherwise; using them is a matter of coding style. If you prefer using them, I would suggest uniformity, putting all font family names (except the generic names like serif) in quotes.

Upvotes: 4

Related Questions