CODEWITHSUNDEEP
htmlwindowsunicodesafari
Christian Haller
Christian Haller

Reputation: 663

Unicode in <button> is not rendered properly on Safari 5.1 (Windows)

in Safari 5.1/Windows XP, the unicode arrow in the button element is not shown. <span> is working fine.

<span>▼</span>
<button>▼</button>

Screenshot: http://cl.ly/image/1T0J1X10141A

fiddle: http://jsfiddle.net/christianhaller/nTvjU/1/

Any hints to fix this?

further information: IE8 on the same OS has no problems with the unicode character

Upvotes: 0

Views: 556

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201768

This is a font problem. It does not exist in Safari 5.1.7 on Windows 7, but I was able to reproduce it in Safari 5.1.7 in a virtual Windows XP. Instead of the triangle character, a small rectangle appears, a common indicator of a missing glyph.

Apparently, on Windows XP, Safari uses some fixed font (seems to be Microsoft Sans Serif) for button elements and fails to look for other fonts when it encounters a character that is not present in that font. Luckily, this can be fixed by specifying a font that does contain it. If you prefer to have button elements rendered in Microsoft Sans Serif in general, it suffices to specify a fallback font in CSS:

button { font-family: Microsoft Sans Serif, Arial }

Quite a few fonts contain the triangle character, so there are many options. And you might wish to make some of them the primary font for button elements, not just as fallback font.

Upvotes: 1

Related Questions