Detect Browser Character Support in JavaScript

Detect browser character support in javascript?

If you create two SPANs, one containing the character you want, and the other containing an unprintable character U+FFFD (�) is a good one, then you can test whether they have the same width.

<div style="visibility:hidden">
<span id="char-to-check">♯</span>
<span id="not-renderable">�</span>
</div>
<script>
alert(document.getElementById('char-to-check').offsetWidth ===
document.getElementById('not-renderable').offsetWidth
? 'not supported' : 'supported');
</script>

You should make sure that the DIV is not styled using a fixed font.

How to check if character isn't supported by the user's browser in JavaScript?

Browsers do not "support" displaying unicode characters, it's the font that is responsible. Of course, you can always directly include the font that you want to use to display the characters in the emoji section in Unicode with CSS.

Here is a free and open font that can display emojis.

In case you want to detect if a font exists, here is a tool for that.

How to check if 'let' is supported by the browser?

The only way to feature-detect a new syntax or keyword, is to eval it (or, pass it to the not-much-better Function constructor):

function detectLet(){
try{
return !!new Function('let x=true;return x')()
}catch(e){
return false
}
}

console.log(detectLet())

But also note that you can't conditionally use a new syntax, or try to catch a syntax error, since syntax errors happen before your code starts to run!

So, to conditionally use such a feature, you also need eval, which is even worse...

if(detectLet()){
let foo = 'bar';
}
//SyntaxError if `let` isn't supported
if(detectLet()){
eval("let foo = 'bar';") //Wait... really?!
}
//No errors

Conclusion:

If you need to support (those really old) platforms, that don't support let, then don't use let.

Alternatively, you can transpile your code with tools like Babel

But as of 2022, all major browsers support let (even IE!!!), so you can use it safely, and drop support for really legacy browsers.

How to check special character support with javascript?

I’m afraid there’s no way to test it, and there’s the added complexity that even if a character is available, browsers (especially IE) may fail to render it.

On the other hand, the information would not be particularly useful, except perhaps in the sense that you could dynamically change the character to an image if it can’t be rendered as a character.

A better approach to having your characters rendered properly is to write your style sheets so that they select suitable fonts. This also addresses the problem that a character might be displayed using a font that does not suit the overall design, such as the basic copytext font.

For example, if you need the characters ♥ ♦ ♣ ♠ ♪ ♫ ¶, select a font that contains them and all the other characters you need. This would probably boil down just to

body { font-family: Arial, sans-serif; }

How can I detect whether Unicode characters are displayed properly on my web page?

Try using ⋮ (), which is an alternate character for the same thing (a vertical ellipsis). I'm not sure why there are two glyphs for this, and they are slightly different; in my own testing, ︙ () uses circles for the dots, while the other one uses squares. That probably varies by font though. And anyway, you have to increase the font size to ridiculous sizes to notice a difference.



Related Topics



Leave a reply



Submit