Обнаруживать поддержку символов браузера в javascript?

Я работаю над веб-сайтом, связанным с музыкой, и часто использую специальные символы HTML для острых предметов (♯) и квартир (♭), чтобы все было хорошо, например:

&#9839;
&#9837;

Однако я заметил, что в некоторых браузерах (IE6, Safari для ПК) эти символы не поддерживаются. Я создал условный javascript, который обслуживает простые, поддерживаемые символы вместо специальных (G # для G♯ и Bb для B ♭). Но мне трудно понять, как определить, какие браузеры не имеют этих символов.

Я знаю, что могу проверить браузер (например, ie6), но я надеялся сделать все правильно и проверить поддержку персонажа.

Кто-нибудь знает хороший способ сделать это, используя javascript, jQuery или rails? (Страница обслуживается приложением rails, поэтому объект запроса и любая другая магия Rails находятся в таблице.

Ответы

Ответ 1

Если вы создаете два SPAN, один из которых содержит нужный вам символ, а другой, содержащий непечатаемый символ U + FFFD (& # xfffd;), является хорошим, тогда вы можете проверить, имеют ли они ту же ширину.

<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>

Вы должны убедиться, что DIV не используется с использованием фиксированного шрифта.

Ответ 2

"Поддержка браузера" здесь не проблема. Вы должны обслуживать ваши файлы как UTF-8 * и использовать соответствующие символы, а не HTML-объекты.

Юникод резкий символ: ♯ (U + 266F)
Плоский символ Unicode: ♭ (U + 266D)

Вы также должны убедиться, что сохранить ваши файлы в UTF-8 (и не, скажем, ASCII или ISO-8859-1).

См. также: обязательный Joel on Software: абсолютный минимум Каждый разработчик программного обеспечения Абсолютно, положительно должен знать о Unicode и наборах символов (никаких оправданий)!).

* Я не парень Rails, но я думаю, что он делает это по умолчанию.

Ответ 3

Добавьте это в свой HTML

<head>

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

</head>

И проверьте, действительно ли IE и Safari отображают страницу.