4

If I want to display a special character like ⬀, ⤴ or ➶, How can I see if the user's browser can display it? I don't want the character to come out as ▯; if it would, I'd rather display a normal ↗.

So how can I ensure that whatever character I emit is displayed correctly?

I found this answer to this question, which unfortunately doesn't work in my situation.
The trick there is to put a character that doesn't exist in the DOM tree, so you know it won't display, and to compare its width to the width of your desired character. If the widths are the same, chances are your desired character is also undefined and it won't display either.

However, this trick doesn't work in all situations. The linked answer uses U+FFFD for a non-displaying character, but on some devices (in my case, a Windows Mobile phone) the U+FFFD is a defined character, that has a different width than the glyph used for undefined characters (� vs ▯). Also, codepoints that are known non-characters, such as U+FFFE, are displayed as question marks (?) rather than ▯s, so those have different widths too.

So my question is, what can I compare my character against so that I'll know it will not be a non-displayable character?

Community
  • 1
  • 1
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • one really complicated but sure way would be to use the canvas text features to draw a char, then examine the bitmap impression it left against known baddies. – dandavis Feb 19 '14 at 21:33
  • If answers to an existing question are not satisfactory, you should aim at improving them, rather than creating a new copy of the question (and thus copies of the same question with different sets of answers). – Jukka K. Korpela Feb 19 '14 at 22:13
  • @MrLister, Could you give more context on the larger problem you're trying to solve? What are you doing that requires a "browser can display this" predicate? Knowing that could provide clarity around character/glyph distinctions, prompt alternate solutions like SVG fonts with embedded meta-data, etc. – Mike Samuel Feb 19 '14 at 22:27
  • @dandavis The problem is I don't know what the known baddies are! – Mr Lister Feb 20 '14 at 14:29
  • @JukkaK.Korpela The other question had an accepted answer, which means the OP there was satisfied. So my problem might be similar, but it's not the same. Now how can I proceed? I can't edit the answer, because I don't know what the solution is. And I can't edit the question; I'd be changing it into something its OP didn't want. – Mr Lister Feb 20 '14 at 14:32
  • @MikeSamuel Like I said, I want to display a ⬀. Preferably without loading any external resources like background images or fonts, although I may have to resort to that. So if the ⬀ ends up looking like ▯, I want to display a ↗ as a fallback. That's all there is to it. And your solution is perfect, except that it doesn't work! – Mr Lister Feb 20 '14 at 14:36
  • 1
    @MrLister, ok, so you just want to display arrows, and don't need something that deals with code-points that require complex interactions with adjacent code-points to form the right glyph. And you're OK with assuming JS support? Do you need to work on older browsers, like those that don't support canvas or ``? – Mike Samuel Feb 20 '14 at 15:49
  • All that, yes. Javascript support can be handled by putting in the fallback char by default, and changing it to the more suitable one with JS. Also, it's a stand-alone item, like an icon, not part of a word. Data urls are an option, at least if the browsers that don't support them display the alt text neatly. Have to do some testing. In any case, thanks for helping! – Mr Lister Feb 20 '14 at 17:03
  • @MrLister, an accepted answer need not mean a correct answer. In this case, it’s something that worked in some situation. We can comment on this there, and the technique is really inherently unreliable; probably the correct answer is “You really can’t”. Duplicating the question does not change this. – Jukka K. Korpela Feb 20 '14 at 17:13

1 Answers1

0

Use more than one character

Say you're not using a monospace font, Use 3+ characters from different languages that chances are no one have them all installed.

Then measure their width in an environment that can render them and provide this data to your app.

For example:

  • A is wider than B
  • and B is wider than C

A simple algorithm would be:

  1. Gather A, B and C's width in users environment.
    Use the technique you described.

  2. If A is wider than B, B wider than C.
    Fallback to safe character.

  3. If One or All of these isn't in right order.
    Use that one as ▯.

Conclusion

I understand this is basic, but this is best way I can think of.

Pooyan Khosravi
  • 4,861
  • 1
  • 19
  • 20