español - ¿Cómo evitar que los caracteres Unicode se procesen como emoji en HTML desde JavaScript?
emojis javascript (7)
Agregue el carácter
selector de variación Unicode
para forzar texto, VS15,
︎
.
Esto obliga al personaje anterior a representarse como texto en lugar de como un Símbolo Emoji.
<p>🔒︎</p>
Resultado: 🔒︎
Obtenga más información en: símbolo Unicode como texto o emoji
Estoy buscando Unicode para caracteres especiales de la búsqueda de FileFormat.Info .
Algunos caracteres se representan como los glifos clásicos en blanco y negro, como ⚠ (señal de advertencia,
/u26A0
o
⚠
).
Estos son preferibles, ya que puedo aplicarles estilos CSS (como el color).
Otros se muestran como nuevos emoji de dibujos animados, como ⌛ (reloj de arena,
/u231B
o
⌛
).
Estos no son preferibles, ya que no puedo diseñarlos completamente.
Parece que el navegador está haciendo este cambio, ya que puedo ver el glifo del reloj de arena en Mac Firefox, pero no en Mac Chrome ni Mac Safari.
¿Hay alguna manera de obligar a los navegadores a mostrar las versiones anteriores (monótonas planas) para mostrar?
Actualización
: Parece que (de los comentarios a continuación) hay un
selector de presentación de texto
,
FE0E
, disponible para aplicar text-vs-emoji.
El selector se concatena como un sufijo sin espacio en el código del personaje, como
⌛︎
para HTML hexadecimal o
/u231B/uFE0E
para JS.
Sin embargo,
simplemente no es aceptado por todos los navegadores
(por ejemplo, Chrome y Edge).
Google Chrome, versión de escritorio 75, parece desambiguar su enfoque para representar caracteres Unicode en función del primer escape Unicode que encuentra al cargar una página. Por ejemplo, cuando se analiza como el primer escape Unicode HTML en una fuente de página, y no tiene equivalente de emoji, & # 9207; parece aclararle a Chrome que la página contiene escapes que no deben representarse como emoji.
Las fuentes de Android no son ricas como es de esperar. Los archivos de fuentes no tienen estos glifos exóticos y Android tiene un truco para pocos personajes sin glifos. Se reemplazan con iconos.
Entonces, la solución es integrar el sitio con una fuente web (woff). Cree un nuevo archivo de fuente con FontForge y elija el glifo requerido de serif TTF gratuito, por ejemplo. Cada glifo toma 1k. Generar archivo woff.
Prepare CSS simple para importar la familia de fuentes personalizada.
style.css:
@font-face {
font-family: ''Exotic Icons'';
src: url(''exotic-icons.woff'') format(''woff'');
}
.exotic-symbol-font {
position: relative;
top: 1px;
display: inline-block;
font-family: ''Exotic Icons'';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Archivo index.html:
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet"></head>
<title>Test custom glyphs</title>
</head>
<body>
<table>
<tr>
<td class="exotic-symbol-font">
😭 ☠ ♠ a g
</td>
</tr>
</table>
</body>
</html>
Ninguna de las soluciones anteriores funcionó para la extensión "Emoji para Google Chrome".
Así que hice una captura de pantalla del carácter Unicode ''BALLOT BOX WITH CHECK'' (U + 2611) y lo agregué como imagen con php:
$ballotBoxWithCheck=''<img src="pics/U2611.png" style="height:11px;margin-bottom:-1px">''; # ☑ or /U2611
Ver: https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel
No sé de una manera de desactivar la representación de tipo emoji. Por lo general, uso una fuente de icono como font awesome o glyphicons (viene con Bootstrap 3).
El beneficio de usarlos sobre los caracteres Unicode es que
- puede elegir entre muchos estilos diferentes para que se ajuste al diseño de su sitio;
- son consistentes en todos los navegadores (si alguna vez intentaste hacer un personaje estrella Unicode, notarás que es diferente en IE versus otro navegador);
- Además, tienen un estilo completo, como los caracteres Unicode que está intentando utilizar.
El único inconveniente es que es una cosa más que el navegador debe descargar cuando ve su página.
Para mí en OSX, la solución fue establecer la familia de
EmojiSymbols
en
EmojiSymbols
Tenía un carácter Unicode como
span::before
content.
Chrome usó "Segoe UI Emoji" como fuente para representarlo.
Incluso cuando configuré la familia de fuentes en "Segoe UI Symbol", no funcionó.
Pero
, cuando configuré la familia de fuentes en "Segoe UI Symbol" explícitamente para el
span::before
, en lugar de solo para el
span
, entonces funcionó.