2012-05-01 7 views
238

Tengo un problema. He encontrado el código HTML para la flecha hacia abajo, ↓ (↓)Colocando caracteres Unicode en el contenido CSS valor

Genial. Ahora necesito para usarlo en el CSS de este modo:

nav a:hover {content:"&darr";} 

Eso, obviamente, no va a funcionar desde ↓ es un símbolo de HTML. Parece que hay menos información sobre estos símbolos de "escape unicode" que se usan en css. Hay otros símbolos como \2020 que encontré pero no flechas. ¿Cuáles son los códigos de flecha?

+10

Necesita un ': before' o': after' para que el contenido funcione – Musa

+2

Una simple búsqueda en Google reveló http://www.blooberry.com/indexdot/html/tagpages/entities/arrow.htm con el código Unicode puntos para muchas flechas. – Phrogz

+1

@Phrogz Lamentablemente, ese sitio no incluye "/" en el Unicode, por lo que normalmente no tendría idea de que tendría que agregar "/" al código para que funcione en CSS. Ahora sé que tendré que agregar "/" para que funcione. – davecave

Respuesta

370

¿Por qué no solo guarda/sirve el archivo CSS como UTF-8?

nav a:hover:after { 
    content: "↓"; 
} 

Si eso no es lo suficientemente bueno, y que desea mantener todo-ASCII:

nav a:hover:after { 
    content: "\2193"; 
} 

El formato general de un carácter Unicode dentro de una cadena es \000000 a \FFFFFF - una barra invertida seguida de seis dígitos hexadecimales Puede dejar fuera los dígitos 0 cuando el carácter Unicode es el último carácter de la cadena o cuando agrega un espacio después del carácter Unicode. Consulte la especificación a continuación para obtener detalles completos.


Relevant part of the CSS2 spec:

En tercer lugar, se escapa de barra invertida permiten a los autores se refieren a personajes que no se puede poner fácilmente en un documento. En este caso, la barra invertida es seguida por un máximo de seis dígitos hexadecimales (0..9A..F), que representan el carácter ISO 10646 ([ISO10646]) con ese número, que no debe ser cero. (No está definido en CSS 2.1 qué sucede si una hoja de estilo contiene contiene un carácter con código cero Unicode.) Si un carácter en el rango [0-9a-fA-F] sigue el número hexadecimal, al final del número necesita ser aclarado. Hay dos maneras de hacerlo:

  1. con un espacio (u otro carácter de espacio en blanco): "\ 26 B" ("& B"). En este caso, los agentes de usuario deberían tratar un par "CR/LF" (U + 000D/U + 000A) como un único carácter de espacio en blanco.
  2. proporcionando exactamente 6 dígitos hexadecimales: "\ 000026B" ("& B")

De hecho, estos dos métodos se pueden combinar. Solo se ignora un carácter de espacio en blanco después de un escape hexadecimal. Tenga en cuenta que esto significa que se debe duplicar un espacio "real" después de la secuencia de escape.

Si el número está fuera del rango permitido por Unicode (por ejemplo, "\ 110000" está por encima del 10FFFF máximo permitido en Unicode actual), el UA puede reemplazar el escape con el "carácter de reemplazo" (U + FFFD). Si se va a mostrar el carácter, el UA debería mostrar un símbolo visible, como un glifo de "carácter faltante" (véase 15.2, punto 5).

  • Nota: se escapa barra invertida siempre son considerados como parte de un identifier o una cadena (es decir, "\ 7B" no es puntuacion, a pesar de que "{" es, y "\ 32" se permite al inicio de un nombre de clase, aunque "2" no lo es).
    El identificador "te \ st" es exactamente el mismo identificador que "prueba".

lista exhaustiva: Unicode Character 'DOWNWARDS ARROW' (U+2193).

+19

Aquí hay otra lista de flechas: http://unicode-table.com/en/sets/arrows-symbols/ Utilice el código "U +", pero reemplace el "U +" con "\". p.ej. "U + 25C0" se convierte en "contenido:" \ 25C0 ";" – Luke

+5

Esta [Calculadora de conversión de entidades] (http://www.evotech.net/articles/testjsentities.html) puede ser útil. – stove

+5

Un detalle, para agregar un espacio después del carácter escapado, debe agregar dos espacios '\ 2193␣␣ '. Esto se debe a que el primer espacio es comido por el analizador de CSS. Este es el caso si el número Unicode es de 5 o menos caracteres. –

Cuestiones relacionadas