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
How to Display Selected Image Without Sending Data to Server
Trying to Set a Span Element Equal to a Variable Value in a Js Rock, Paper, Scissors Game
Fast Image Loading Methods, Low to High Res with Multiple Backgrounds - JavaScript Solution
Modify Pseudo-Element :After's Width Using JavaScript
How to Reverse the Order of Nested Child Elements
How to Generate Random Pastel (Or Brighter) Color in JavaScript
Images Are Being Rotated by Default Upon Upload
Chosen Dropdown Within Bootstrap Modal Is Hidden Behind Modal Footer
Activate an Element's :Active CSS Pseudo-Class Using JavaScript
Modify the Value of Each Textfield Based on Original Value Using Jquery
Bootstrap 3 Dropdown on iPad Not Working
Change Svg Text to CSS Word Wrapping
Why Does Queryselector('Div Span') Match Even Though Queryselector('Div') Does Not
How to Change the Font Size in Jqgrid