Detect browser character support in javascript?

detect browser javascript
javascript detect browser version
javascript browser detection library
javascript detect browser ie
how to get browser name in jquery
browser detection code
detect-browser npm
detect browser jquery

I'm working on a music related website, and frequently use the HTML special characters for sharps (♯) and flats(♭) to keep things pretty, e.g.:

♯
♭

However, I've noticed that in some browsers (IE6, Safari for PC) those characters aren't supported. I've created a conditional javascript that serves up plain, supported characters in place of the special ones ( G# for G♯ and Bb for B♭ ). But I'm having a hard time figuring out how to detect which browsers lack those characters.

I know I could test for the browser (e.g. ie6), but I was hoping to do things right and test for character support itself.

Does anyone know of a good way to do this using either javascript, jQuery, or rails? (The page is served by a rails app, so the request object and any other Rails magic is on the the table.

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">&#9839;</span>
  <span id="not-renderable">&#xfffd;</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.

jquery - 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​  JavaScript browser detection is not reliable. JavaScript can be turned off by the user. Also, there are a lot of browsers and browser-versions out there — and there will be more in the future — which makes browser detection impractical and unmaintainable as part of an always-up-to-date codebase. Feature detection is a better option

JavaScript Window Navigator, The information from the navigator object can often be misleading, and should not be used to detect browser versions because: Different browsers can use the  any browser that doesn't support JavaScript 1.2 methods was supposed to bypass this whole block of code. Of course, on this side of the infamous browser wars this method of detection is next to useless, as in their rush to support things , the two main browsers didn't give a second thought to supporting the same things ; and so JavaScript 1.2, for example, doesn't refer to any one standard.

Rather than mucking around with JavaScript, what you should be doing instead is using css's unicode-range:

@font-face {
  font-family: 'MyWebFont'; /* Define the custom font name */
  src:  local("Segoe UI Symbol"),
        local("Symbola"),
        url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff'); /* Define where the font can be downloaded */
  unicode-range: U+266F, U+266D; /* Define the available characters */
}

body {
  font-family: 'MyWebFont', Arial;
}
&#9839;
&#9837;
Normal text

JavaScript String charCodeAt() Method, Tip: For more information about Unicode Character Sets, visit our HTML Character Sets reference. Browser Support. Method. charCodeAt(), Yes, Yes, Yes​, Yes  For more dynamic browser selections, JavaScript is actually a valid way to go. Below, you'll find a code snippet that you can use to check for Internet Explorer, Chrome, Firefox, Safari, and Opera. The function checks for these browsers, and will execute any code you insert within the if/else if statements for each browser if the code is run on any of the browsers in question.

Add this to your HTML

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 

</head>

And check to see if IE and Safari render the page right.

HTML Unicode UTF-8, how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. If the character does not have an HTML entity, you can use the decimal (​dec) or hexadecimal (hex) reference. Older browsers may not support all the HTML5 entities in the table below. 9989, 2705, WHITE HEAVY CHECK MARK​Try it. alert('onclick' in document.documentElement); //displays true. The part where it gets complicated is that you must perform the test on an element that could conceivably be the owner of that event. For example, the onchange event is not produced by the document element, so testing against it will always return false.

HTML script charset Attribute, The charset attribute is used when the character encoding in an external script file differs from the encoding in the HTML document. Browser Support. Attribute. The concept of feature detection. The idea behind feature detection is that you can run a test to determine whether a feature is supported in the current browser, and then conditionally run code to provide an acceptable experience both in browsers that do support the feature, and browser that don't.

HTML Character Sets, how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. page correctly, the browser must know what character-set (encoding) to use: It defined a unique binary number for each storable character to support the  edbrowse claims to support JavaScript (but I've never used it) As ed is the standard editor edbrowse may become the standard browser ;-).

KeyboardEvent keyCode Property, lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. Get the Unicode value of the pressed keyboard key: The keyCode property returns the Unicode character code of the key that triggered the keyCode; // Use either which or keyCode, depending on browser support. The information from the navigator object can often be misleading, and should not be used to detect browser versions because: Different browsers can use the same name. The navigator data can be changed by the browser owner. Some browsers misidentify themselves to bypass site tests.

Comments
  • I ended up going with Mike Samuel's excellent solution, though I think those indicating formatting issues may have something there -- I did attempt all solutions, but that doesn't mean I haven't missed anything. Anyone undergoing a similar issue should, as the others have suggested: 1. ensure their page has proper character encoding, 2. see the linked answer referenced by Matt Ball. I have a sneaking suspicion 99% of the time his might be the better solution than a javascript hack.
  • I suspect that this is a font issue. The chosen font does not contain the graphemes for the code points you want. Many modern browsers can compensate for this using font substitution (picking the grapheme out of another font). Mike Samuel's solution is clever, but might not work if fixed-width fonts get involved. Unfortunately, I don't have any better solutions.
  • @McDowell - Hm... I looked over this list of fonts and didn't see any web-safe fonts that might be on systems with ie6. So I simply tried 'sans serif' without success. Am I missing something here? What's a good choice?
  • Microsoft seems to claim that Arial Unicode MS works, but it doesn’t for me (or possibly my version of Windows XP doesn’t include it).
  • very clever! and so fast that I have to wait four more minutes to mark your answer as accepted, which I will.
  • I had previously tried adding the special character as a class on a throwaway div, and then testing for the class, but without any luck. This is a very elegant piece of code -- thank you!
  • @Pirripli, thanks. I'd make sure it actually works on the browsers you're worried about before marking it accepted. Matt Ball may be right.
  • The problem with this method is that &#xfffd; displays with a width and other valid characters have that same width such as &#x2588;
  • This method is based on the implicit assumption that a character that is missing in fonts is rendered the same as U+FFFD. This is not reliable, and browsers are known to use other renderings.
  • Hm... I believe I'm already doing this. I have a meta tag: <meta charset="utf-8">. Is there something special I should be doing other than copying and pasting the actual symbol into my markup? I've just done this, tested it on ie6, and found little square boxes. Do you know that ie6 supports those two symbols?
  • @Pirripli: see this answer. It may just be a font problem, but inserting the symbol into the markup is definitely the way to go. Are you sure you're saving the file as UTF-8?
  • Very interesting, definitely worth a read, but I wasn't able to turn this page's insights into sharp symbols... I first tried changing the class of the div in question to use Arial, then just plain sans-serif, without success. It's very possible I'm missing something here, but for the moment, I think I'm going to use Mike Samuel's suggestion. I'll let you know if I have success later, but at this point I think the types of users still on ie6 won't mind seeing # for ♯. ;)
  • @Pirripli: it's good that you understand that the JS approach is more of a hack. IMO, the best solution is to simply stop supporting IE6. That said - you did mention that Safari on Windows also had issues...
  • HA! I love ie6nomore.com and will consider using their code to prompt users in the right direction. I have noticed, however, even as I wrestle daily with ie6 (it's my least favorite part of any design project) I find that attempting to make things work for ie6 often makes me code better, relying on simpler HTML, fewer box model hacks (e.g. negative margins, etc...) and makes me generally think about pages more holistically rather than just a collection of DIVs and CSS. Don't get me wrong, I still hate it. But I think of it more as a bastard track coach.
  • Nope, no luck. I already had <meta charset="utf-8">, but I tried adding your attributes to no avail... thanks for the idea, though! I wish that were it... ;)