Visualización de símbolos unicode en HTML

89

Quiero simplemente mostrar los símbolos de tick (✔) y cross (✘) en una página HTML, pero aparece como un cuadro o una sustancia pegajosa, obviamente, algo que tiene que ver con la codificación.

He configurado la metaetiqueta para mostrar utf-8 pero obviamente me falta algo.

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

Edición / Solución: A partir de los comentarios realizados, al usar FireBug, encontré que los encabezados que pasaba por mi página eran de hecho "Tipo de contenido: texto / html" y no UTF-8. Mirando el formato de archivo usando Notepad ++ mostró que mi archivo estaba formateado como "UTF-8 sin BOM". Al cambiar esto a solo UTF-8, los símbolos ahora se muestran correctamente ... pero firebug todavía parece indicar el mismo tipo de contenido.

html unicode Peter Craig
fuente

Respuestas:

56

Debe asegurarse de que los encabezados del servidor HTTP sean correctos.

En particular, el encabezado:

Content-Type: text/html; charset=utf-8

debe estar presente.

Los navegadores ignoran la metaetiqueta si el encabezado HTTP está presente.

También asegúrese de que su archivo esté realmente codificado como UTF-8 antes de servirlo, verifique / intente lo siguiente:

  • Asegúrese de que su editor lo guarde como UTF-8.
  • Asegúrese de que su FTP o cualquier programa de transferencia de archivos no se meta con el archivo.
  • Pruebe con entidades codificadas en HTML, como &#uuu;.
  • Para estar realmente seguro, descargue el archivo y mire como el carácter, para el ✔, debería ser E2 9C 94.

Nota: Si usa un carácter Unicode para el cual su sistema no puede encontrar un glifo (sin fuente con ese carácter), su navegador debería mostrar un signo de interrogación o algún símbolo de bloque. Pero si ve varios caracteres romanos como lo hace, esto denota un problema de codificación.


fuente
En realidad, la metaetiqueta no se ignora, pero el encabezado HTTP tiene prioridad. Gracias Konrad por esa precisión.
8
Tenga en cuenta que para utilizar un carácter Unicode en la contentpropiedad de un ::beforeselector de CSS , sería necesario utilizar la notación de barra invertida. por ejemplo: '\ 2713' en lugar de '& # 2713'.
Fabien Snauwaert
18

Sé que ya se ha aceptado una respuesta, pero quería señalar algunas cosas.

La configuración de content-typey charsetes obviamente una buena práctica, hacerlo en el servidor es mucho mejor, porque garantiza la coherencia en toda la aplicación.

Sin embargo, lo usaría UTF-8solo cuando el idioma de mi aplicación usa muchos caracteres que están disponibles solo en el UTF-8juego de caracteres. Si desea mostrar un carácter o símbolo Unicode en uno de los casos, puede hacerlo sin cambiar el charsetde su página.

HTMLLos renderizadores siempre han podido mostrar símbolos que no forman parte del conjunto de caracteres de codificación de la página, siempre que mencione el símbolo en su numeric character reference (NCR). Suena raro pero es cierto.

Por lo tanto, incluso si htmltiene un encabezado que indica que tiene una codificación de ansio cualquiera de los conjuntos de isocaracteres, puede mostrar una marca de verificación utilizando su referencia de carácter html, en decimal - & # 10003; o en hexadecimal - & # x2713;

Así que es un poco difícil entender por qué se enfrenta a este problema en sus páginas. ¿Puede comprobar si el valor de NCR es correcto? Esta es una buena referencia http://www.fileformat.info/info/unicode/char/2713/index.htm

Akshay
fuente
6
"Sin embargo, usaría UTF-8 solo cuando el idioma de mi aplicación usa muchos caracteres que están disponibles solo en el juego de caracteres UTF-8" ¿Por qué? ¿Cuál es la desventaja de cambiar?
dumbledad
3
@dumbledad: Muy buena pregunta, supongo que dejé que mi propio sesgo nublara mi respuesta. Lo que quise decir es que si toda la aplicación ya no es utf-8, cambiar el video de la aplicación para una sola página puede ser demasiado trabajo. Además, si su lenguaje de programación y contenido no necesitan caracteres utf-8, puede copiar accidentalmente y pegar un carácter basura con el que su editor estará bien (ya que está en modo utf-8), pero el código fallará durante la ejecución. Dicho esto, cuando pueda, actualice su codificación y conjunto de caracteres
Akshay
6

Asegúrese de guardar el archivo como UTF-8, alternativamente use entidades HTML ( &#nnn;) para los caracteres especiales.

Guffa
fuente
No parece haber una entidad HTML para ✔ o ¿me la he perdido? ¿Cómo se guarda "realmente" el archivo como UTF-8 y cómo se puede comprobar?
Peter Craig
@Peter: usando un editor decente. La mayoría de los editores de texto tienen una opción en su cuadro de diálogo "guardar como" para especificar la codificación del archivo, o tienen otra opción oculta en algún lugar de su menú. Vim usa la fileencodingconfiguración.
Konrad Rudolph
8
@Peter, puedes hacer referencia a cualquier carácter por su código. Pruebe & # x2714; por una garrapata.
Dan Dyer
guardar como utf-8. concepto interesante. funciona bien si está creando páginas HTML estáticas. pero ... ¿qué pasa con las páginas web dinámicas? este material de caracteres unicode / utf-8 / wide es realmente bastante confuso para mí. mi código de backend es perl. el encabezado http está configurado correctamente y también el encabezado html. El Comprobador de internacionalización del W3C confirma que tengo el documento configurado en utf-8. ¿Importa CaSinG? finalmente, ¿qué pasa con los cuadros de entrada de texto? ¡Todavía me pongo pegajoso! :(
Jarett Lloyd
anexo al comentario anterior: mi base de datos muestra que los datos se han introducido correctamente y los caracteres se muestran correctamente. por lo tanto, no es un problema de base de datos. mi script de perl (o mejor dicho, el editor) está configurado para guardar los scripts como utf-8. mi servidor, apache2, estoy bastante seguro de que no está interfiriendo o está configurado correctamente. Dicho todo esto, todavía no estoy seguro de por qué los caracteres son pegajosos. ugh. tiene que haber una mejor manera
Jarett Lloyd
5

A diferencia de lo propuesto por Nicolas, la metaetiqueta no es ignorada por los navegadores. Sin embargo, el Content-Typeencabezado HTTP siempre tiene prioridad sobre la presencia de una metaetiqueta en el documento.

Así que asegúrese de enviar la codificación correcta a través del encabezado HTTP, o no envíe este encabezado HTTP en absoluto (no recomendado). La metaetiqueta es principalmente una opción de respaldo para documentos locales que no se envían a través del tráfico HTTP.

El uso de entidades HTML también debe considerarse una solución alternativa, es decir, evitar el problema real de puntillas. Configurar el servidor web correctamente evita muchas molestias.

Konrad Rudolph
fuente
0

Creo que este es un problema de archivo, simplemente guardó su archivo en codificación de 1 byte como latin-1. Busque en Google su editor y cómo configurar archivos en utf-8.

Me pregunto por qué hay editores que no utilizan utf-8 de forma predeterminada.

Kugel
fuente