lunes, 7 de enero de 2013

Caracteres "raros" en scripts y CSS

A veces, cuando se usan scripts, debemos escribir caracteres especiales como acentos y estos no se ven bien o aparece un signo de interrogación u otros símbolos raros. Por lo general, esto se resuelve si la codificación de caracteres es correcta pero lo lógico no siempre funciona.

En Blogger, los caracteres especiales suelen verse bien por lo que ese problema es difícil que se nos presente pero, cuando se trata de otros servicios, de archivos externos, las cosas pueden complicarse, sobre todo si queremos emplear caracteres especiales [1 2]

Por ejemplo, esto, suele verse bien y al hacer click en este enlace, se verán las letras de modo correcto:
alert(" á é í ó ú  ☺ ❤ ✛ ");
Si no es así y quiero usar caracteres de ese tipo, lo que debo hacer es escribirlos en un formato especial, las llamadas cadenas de escape que no son otra cosa que una barra invertida seguida de una letra y un número en formato hexadecimal. En el caso de los acentos o caracteres comunes, sería \x más el código Unicode de dos dígitos:

\xe1 es la letra á
\xe9 es la letra é
\xed es la letra í
\xf3 es la letra ó
\xfa es la letra ú

Algunas combinaciones generan caracteres especiales:

\n es un salto de linea
\t es una tabulación
\' es la forma de escribir comillas simples
\" es la forma de escribir comillas dobles
\\ es una barra invertida

De manera más genérica, podemos usar \u más el código Unicode en formato hexadecimal (cuatro dígitos):

\u00e1 es la letra á
\u00e9 es la letra é
\u00ed es la letra í
\u00f3 es la letra ó
\u00fa es la letra ú

lo que nos permitirá ver correctamente eso que antes no se podía:
alert(" \u263a \u2764 \u271b ");
En esta página, hay una lista muy completa de todos los caracteres, tanto símbolos como distintos alfabetos.

Aunque en el CSS no suelen usarse caracteres raros, hay un caso en que también son necesarios, cuando se utiliza la propiedad content junto con :after y :before

Allí, se usa el mismo criterio aunque sólo es necesario agregar la barra invertida seguida de los cuatro dígitos del código hexadecimal. Por ejemplo:
content: ":\24d1\24d4\24d5\24de\24e1\24d4";

content: ":after \263a \2724 \2602";
:after ☺ ✤ ☂
:ⓑⓔⓕⓞⓡⓔ

No hay comentarios:

Publicar un comentario