1

I have a page which contains some HTML-encoded Unicode characters: ▲ (▲), ▼ (▼), ◄ (◄), ► (►) and ✓ (✓). Some users complain about some of these not showing up in their browser.

What is the best way to solve this without installing fonts on the users' machines? Do I have to make bitmaps for each Unicode character? If yes, is there a tool to convert characters to bitmaps? Or is there a better way?

kol
  • 27,881
  • 12
  • 83
  • 120

2 Answers2

4

As this is primarily a font problem, the alternatives are to use a downloadable font, also known as web font, via @font-face, and to use images instead of characters. I wrote “primarily”, because there is an additional difficulty: some browsers will not display some characters unless they can be found in the fonts listed in the applicable font-family list. For generalities on these issues, see my Guide to using special characters in HTML.

In this special case, the character “✓” may cause problems since it is present in relatively few fonts. I would expect the others to be OK in most cases, but my expectation was wrong: Android (2.x) shows ▲ and ▼ OK, but not ◄ and ►.

Using a downloadable font to get such characters rendered might be overkill, so it might be best to use images. You can just write the character in some program using some suitable font in large size, take screen captures of each, and save them as images. Then you would use them via img tags, setting the heights of the images to suitable height in CSS, using the em unit. The reason is that this way they will look good in different font sizes – adapting to font size, and scaling downwards tends to produce better results than scaling upwards.

If you take this way, then it is best to represent all of ▲, ▼, ◄, ► as images, to make them stylistically matching.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Thanks! I ended up using images. I found a useful tool: http://www.fileformat.info/info/unicode/char/search.htm I just enter the code of the character, and I get every every info including a **server-generated image of the character**! – kol Sep 26 '13 at 13:12
-3

Simply use UTF-8 for encoding of your pages and in case some fonts are missing those symbols use Arial, because it contains them all.

Cowwando
  • 450
  • 5
  • 11
  • 1
    Using UTF-8 is a good idea, but irrelevant here. Arial is not available in all systems (e.g., Androids don’t have it), and it exists in different versions. No version of Arial contains “✓”. – Jukka K. Korpela Sep 26 '13 at 11:59
  • Arial Unicode MS does, but that's not Arial and it's also an even worse choice for a font. – Joey Sep 26 '13 at 12:08
  • @Joey, the main problem with Arial Unicode MS (regarding use in web pages) is that it is far from being universally available. It is normally available only in computers that have Microsoft Office installed. Otherwise, it would mostly be OK to use it to render individual special characters. – Jukka K. Korpela Sep 26 '13 at 12:15