¿Detectar el soporte de caracteres del navegador en javascript?

Estoy trabajando en un sitio web relacionado con la música y con frecuencia uso los caracteres especiales HTML para sostenidos (♯) y bemoles (♭) para mantener las cosas bonitas, por ejemplo:

♯
♭

Sin embargo, he notado que en algunos navegadores (IE6, Safari para PC) esos caracteres no son compatibles. He creado un javascript condicional que ofrece caracteres simples y compatibles en lugar de los especiales (G # para G♯ y Bb para B ♭). Pero me está costando descubrir cómo detectar qué navegadores carecen de esos caracteres.

Sé que podría probar el navegador (por ejemplo, ie6), pero esperaba hacer las cosas bien y probar apoyo de personajes misma.

¿Alguien sabe de una buena manera de hacer esto usando javascript, jQuery o rieles? (La página es servida por una aplicación de Rails, por lo que el objeto de solicitud y cualquier otra magia de Rails está sobre la mesa.

preguntado el 08 de enero de 11 a las 19:01

Terminé optando por la excelente solución de Mike Samuel, aunque creo que aquellos que indican problemas de formato pueden tener algo allí: intenté todas las soluciones, pero eso no significa que no me haya perdido nada. Cualquiera que esté pasando por un problema similar debe, como los demás han sugerido: 1. asegurarse de que su página tenga la codificación de caracteres adecuada, 2. ver la respuesta vinculada a la que hace referencia Matt Ball. Tengo una sospecha furtiva el 99% de las veces que podría ser la mejor solución que un truco de JavaScript. -

Sospecho que se trata de un problema de fuentes. La fuente elegida no contiene los grafemas para los puntos de código que desea. Muchos navegadores modernos pueden compensar esto mediante la sustitución de fuentes (seleccionando el grafema de otra fuente). La solución de Mike Samuel es inteligente, pero podría no funcionar si se involucran fuentes de ancho fijo. Desafortunadamente, no tengo mejores soluciones. -

@McDowell - Hm ... miré por encima esta lista de fuentes y no vi ninguna fuente segura para la web que pudiera estar en sistemas con ie6. Así que simplemente probé 'sans serif' sin éxito. ¿Me estoy perdiendo de algo? ¿Qué es una buena elección? -

Microsoft parece afirmar que Arial Unicode MS funciona, pero no para mí (o posiblemente mi versión de Windows XP no lo incluye). -

4 Respuestas

Si crea dos SPAN, uno que contiene el carácter que desea y el otro que contiene un carácter no imprimible U + FFFD ( ) es bueno, entonces puede probar si tienen el mismo ancho.

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

Debe asegurarse de que el DIV no tenga un estilo con una fuente fija.

Respondido el 08 de enero de 11 a las 22:01

¡muy inteligente! y tan rápido que tengo que esperar cuatro minutos más para marcar su respuesta como aceptada, lo que haré. - Chris Ladd

Anteriormente había intentado agregar el carácter especial como una clase en un div desechable y luego probar la clase, pero sin suerte. Este es un código muy elegante, ¡gracias! - Chris Ladd

@Pirripli, gracias. Me aseguraría de que realmente funcione en los navegadores que le preocupan antes de marcarlo como aceptado. Matt Ball puede tener razón. - Mike Samuel

El problema con este método es que las pantallas con un ancho y otros caracteres válidos tienen el mismo ancho, como █ - Tom Kincaid

Este método se basa en la suposición implícita de que un carácter que falta en las fuentes se representa igual que U + FFFD. Esto no es confiable y se sabe que los navegadores usan otras representaciones. - Jukka K. Korpela

La "compatibilidad con el navegador" no es el problema aquí. Usted debería ser sirviendo sus archivos como UTF-8*y utilice los caracteres adecuados en lugar de las entidades HTML.

  • Símbolo agudo Unicode: ♯ (U + 266F)
  • Símbolo plano Unicode: ♭ (U + 266D)

También debe asegurarse de guarda tus archivos en UTF-8 (y no, digamos, ASCII o ISO-8859-1).

Ver también: lo que debe ser mencionado Joel en el software: el mínimo absoluto que todo desarrollador de software debe conocer absoluta y positivamente sobre Unicode y conjuntos de caracteres (¡sin excusas!).


* No soy un tipo de Rails, pero creo que lo hace de forma predeterminada.

Respondido el 08 de enero de 11 a las 22:01

Hm ... creo que ya estoy haciendo esto. Tengo una metaetiqueta: . ¿Hay algo especial que deba hacer además de copiar y pegar el símbolo real en mi marcado? Acabo de hacer esto, lo probé en ie8 y encontré pequeñas cajas cuadradas. ¿Sabes que ie6 admite esos dos símbolos? - Chris Ladd

@Pirripli: ver esta respuesta. Puede ser solo un problema de fuente, pero insertar el símbolo en el marcado es definitivamente el camino a seguir. ¿Está seguro de que está guardando el archivo como UTF-8? - Matt Ball

Muy interesante, definitivamente vale la pena leerlo, pero no pude convertir la información de esta página sobre los símbolos nítidos... Primero intenté cambiar la clase del div en cuestión para usar Arial, luego simplemente sans-serif, sin éxito. Es muy posible que me esté perdiendo algo aquí, pero por el momento, creo que voy a utilizar la sugerencia de Mike Samuel. Te haré saber si tengo éxito más tarde, pero en este punto creo que a los tipos de usuarios que todavía están en ie6 no les importará ver # por ♯. ;) - Chris Ladd

@Pirripli: es bueno que entiendas que el enfoque JS es más un truco. En mi opinión, la mejor solución es simplemente detener secundario IE6. Dicho esto, mencionaste que Safari en Windows también tenía problemas ... Matt Ball

¡DECIR AH! Me encanta ie6nomore.com y consideraré usar su código para guiar a los usuarios en la dirección correcta. Sin embargo, he notado que incluso cuando lucho a diario con ie6 (es mi parte menos favorita de cualquier proyecto de diseño), encuentro que intentar hacer que las cosas funcionen para ie6 a menudo me hace codificar mejor, confiando en HTML más simple, menos hacks de modelos de caja ( por ejemplo, márgenes negativos, etc ...) y me hace pensar en las páginas de manera más integral en lugar de solo una colección de DIV y CSS. No me malinterpretes, todavía lo odio. Pero lo veo más como un entrenador de pista bastardo. - Chris Ladd

En lugar de jugar con JavaScript, lo que debería hacer en su lugar es usar css rango unicode:

@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

En la revista local bloques, defina fuentes que las personas puedan haber instalado localmente y contengan los símbolos que desee (como el símbolo de la interfaz de usuario de Segoe de Windows). Luego defina una fuente web (sugiero Symbola) que contiene el símbolo que desea mostrar.

La directiva Unicode-range le dice a los navegadores compatibles (IE9 y superior) no descargar la fuente a menos que los símbolos especificados estén presentes en la página (puede encontrar su número Unicode buscando Tablas Unicode.)

Si ya tienen la fuente, no la descargarán. Si los símbolos no están presentes en la página y su navegador no es más antiguo que la suciedad, la fuente no se descargará. Solo se descargará cuando sea necesario.

(Si aún desea admitir el IE antiguo, use ardilla para generar su declaración inicial @ font-face, luego agregue el local y unicode-range partes usted mismo.

Respondido el 08 de Septiembre de 18 a las 05:09

Agrega esto a tu HTML

<head>

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

</head>

Y compruebe si IE y Safari muestran la página correctamente.

Respondido 17 Abr '14, 23:04

No, no hay suerte. Yo ya tenía , pero intenté agregar tus atributos en vano ... ¡gracias por la idea! Ojalá fuera así ...;) - Chris Ladd

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.