¿Cómo evitar que los caracteres Unicode se muestren como emoji en HTML desde JavaScript?

119

Estoy encontrando 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 \u26A0o ⚠). Estos son preferibles, ya que puedo aplicarles estilos CSS (como el color).

Otros se muestran como emoji de dibujos animados más nuevos, como ⌛ (reloj de arena \u231Bo ⌛). 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 forma de obligar a los navegadores a mostrar las versiones anteriores (planas y monótonas)?

Actualización : Parece (de comentarios abajo) hay un selector de presentación del texto , FE0Edisponible para hacer cumplir texto-vs-emoji. El selector está concatenado como un sufijo sin espacio en el código del carácter, como ⌛︎para HTML hexadecimal o \u231B\uFE0Epara JS. Sin embargo, simplemente no es compatible con todos los navegadores (por ejemplo, Chrome y Edge).

javascript html css unicode emoji Aritmomaníaco
fuente

¿Establece una familia de fuentes en sus reglas CSS?

G-Cyrillus

2

Posible duplicado de glifos / símbolos Unicode Emoji inconsistentes

一二三

1

@janaspage ︎y \uFE0Eson correctos (2 y 8) y funcionan bien en Safari (8 y 9), pero como dice la respuesta: el soporte del navegador es irregular y Chrome (46) está completamente roto.

一二三

2

Simplemente no existe una forma estándar de controlar la representación de Emojis.

nwellnhof

1

Todo lo que tiene que hacer es aplicar una fuente que contenga glifos para estos caracteres, y cuyos glifos se vean como usted desea (sin colores, sin formas o lo que prefiera).

ShreevatsaR

133

Añada la variación selector de Unicode de caracteres para forzar el texto, vs 15, ︎.
Esto obliga al carácter anterior a representarse como texto en lugar de como un símbolo emoji.

<p>🔒&#xFE0E;</p>

Resultado: 🔒︎

Más información en: símbolo Unicode como texto o emoji

Huang
fuente

1

Esto es muy útil, por eso lo voté a favor el otro día. Me pregunto cómo puedo pegar un emoji y este personaje invisible en un anuncio de Facebook que estoy escribiendo. PD: Esto también fue interesante: apple.stackexchange.com/a/240450/53510

Ryan

3

Me acabo de dar cuenta de que este ︎truco no me funciona con ciertas fuentes. Me está costando encontrar una fuente que razonablemente pueda esperar que se instale en todas las máquinas (Windows, iOS, Mac, Android, etc.).

Ryan

12

Esta solución realmente no es aceptable para símbolos que incluso pueden aparecer en campos de entrada. Estoy teniendo este problema con el símbolo ↔ usado en lógica, y no puedo por mi vida entender por qué alguien piensa que esto debería ser un emoji.

frabjous

2

La siguiente página es útil para copiar y pegar ese carácter especial inmediatamente después de un emoji para que parezca plano en lugar de estilizado. Por ejemplo, es posible que vea 💬︎ en lugar de 💬 y 🌟︎ en lugar de 🌟 y ⌛︎ en lugar de ⌛ y 🔒︎ en lugar de 🔒 (según su dispositivo) unicode-symbol.com/u/FE0E.html

Ryan

15

Esto se muestra como un emoji en el ejemplo para mí, chrome 71 en mac 10.11.6.

Lahwran

13

Tenía un carácter Unicode en el contentde a span::before, y tenía el font-familydel spanconjunto en "Segoe UI Symbol". Pero Chrome usó "Segoe UI Emoji" como fuente para renderizarlo.

Sin embargo, cuando configuré el font-family"Símbolo de IU de Segoe" explícitamente para span::before, en lugar de solo para span, funcionó.

Glia
fuente

Esta debería ser la respuesta correcta, especialmente porque el antiguo método de caracteres invisibles no es respetado por la mayoría de los principales navegadores.

Sarah C. Corriher

2

Para que una solución solo de CSS evite que iOS muestre emojis, puede usar font-family: monospaceel valor predeterminado de la variante de texto del glifo en lugar de la variante de emoji.

cmbuckley
fuente

1

Las fuentes de Android no son tan ricas como cabría esperar. Los archivos de fuentes no tienen estos glifos exóticos y Android tiene un truco para algunos caracteres 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 TTF serif libre, por ejemplo. Cada glifo ocupa 1k. Genere un 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">
            😭 ☠ &#x2660; a  g
        </td>       
      </tr>
    </table>
  </body>
</html>

Daneel S. Yaitskov
fuente

1

Si su principal preocupación es forzar la visualización monocromática para que los emoji no se destaquen demasiado del texto, los filtros CSS, ya sea solos o en combinación con el selector de variación Unicode, pueden ser algo que desee.

p.gscale { 
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
a {
  color: #999;
  -webkit-filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
   filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
}

<p class="gscale">You've now got emoji display on 🔒lockdown🔒.</p>

<p>External Link: <a href="https://knowyourmeme.com/memes/party-hard">celebrate 🎉</a></p>

Expandir fragmento

A diferencia del selector de variaciones, no debería importar cómo se representen los emoji, porque los filtros CSS se aplican a todo. (Los uso para escalar iconos de tipo de enlace en formato PNG en escala de grises en hipervínculos que se han modificado para apuntar a Wayback Machine).

Solo ten en cuenta la advertencia . No puede anular el filtro de un elemento principal en un elemento secundario, por lo que esta técnica no se puede usar para escalar un párrafo en escala de grises y luego volver a colorear los enlaces dentro de él. 😢

... aún así, es útil para situaciones en las que convertirá todo en un hipervínculo o rechazará el marcado enriquecido dentro de él. (por ejemplo, títulos y descripciones)

Sin embargo, esto no funcionará a menos que se aplique CSS, así que daré una segunda opción que es más confiable en <title>elementos que el selector de variación Unicode (te estoy mirando GitHub. No me gustan los íconos falsos en mi pestañas del navegador):

Si está colocando una cadena proporcionada por el usuario en un <title>elemento, filtre el emoji junto con cualquier negrita / cursiva / subrayado / etc. margen. (Sí, para aquellos que se lo perdieron, el estándar exige que el contenido de <title>sea texto sin formato además de los caracteres de escape y los navegadores que probé interpretan todas las etiquetas como texto literal).

Las dos formas en las que puedo pensar son:

Utilice directamente una expresión regular mantenida manualmente que coincida con los bloques donde la versión más reciente de Unicode coloca sus emoji y sus modificadores.
Itere los grupos de grafemas y descarte los que contengan puntos de código emoji reconocidos. (Un grupo de grafemas es un glifo base más todos los diacríticos y otros modificadores que componen el carácter visible. El ejemplo al que me vinculo usa el motor de expresiones regulares de Python para tokenizar y luego el emojipaquete para la base de datos, pero Rust es un buen ejemplo de un lenguaje donde la iteración de grupos de grafemas es rápida y fácil a través de una caja como unicode-segmentation).

ssokolow
fuente

0

Google Chrome, versión de escritorio 75, parece eliminar la ambigüedad de su enfoque para representar caracteres Unicode basándose en el primer escape Unicode que encuentra al cargar una página. Por ejemplo, cuando se analiza como el primer escape HTML Unicode en una fuente de página y no tiene un equivalente emoji, & # 9207; parece aclararle a Chrome que la página contiene escapes que no se deben representar como emoji.

Clay Allen
fuente

0

Ampliando la respuesta de ssokolow , usar un filtro es bueno y al menos hace que los contornos sean visibles en lugar de usar una fuente simple, pero convertir un color RGB en una secuencia de filtros CSS es muy difícil cuando se desea usar un color específico.

Una opción mejor (aunque bastante prolija) es usar el <feColorMatrix>filtro SVG. Combinado con el filtro de escala de grises y el esquema de URI de datos, puede representar el color a través de RGB y CSS en línea:

.violet {
  color: white;
  filter: grayscale(100%) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='f'><feColorMatrix type='matrix' values='0.78 0 0 0 0  0 0.082 0 0 0  0 0 0.522 0 0  0 0 0 1 0'/></filter></svg>#f");
}

Desafortunadamente, no puede interpolar la URL con datos (tomados de atributos o variables), pero al menos no tiene que calcular filtros CSS a partir de RGB.

IllidanS4 quiere que Monica vuelva
fuente

-2

No conozco una forma de desactivar el renderizado de tipo emoji. Por lo general, utilizo una fuente de iconos como font awesome o glyphicons (viene con Bootstrap 3).

El beneficio de usar estos sobre los caracteres Unicode es que

puede elegir entre muchos estilos diferentes para que se adapte al diseño de su sitio;
son consistentes en todos los navegadores (si alguna vez intentó hacer un carácter de estrella Unicode, notará que es diferente en IE frente a otros navegadores);
Además, son totalmente modificables, como los caracteres Unicode que está intentando utilizar.

El único inconveniente es que es una cosa más que el navegador debe descargar cuando ven su página.

Dave.mcalpine
fuente

-2

Para mí en OSX, la solución fue establecer la familia de fuentes en EmojiSymbols

Nathan
fuente

-3

Ninguna de las soluciones anteriores funcionó para la extensión "Emoji para Google Chrome".

Entonces, como solución , hice una captura de pantalla del carácter Unicode 'BALOT BOX WITH CHECK' (U + 2611) y la agregué como imagen con php:

 $ballotBoxWithCheck='<img src="pics/U2611.png" style="height:11px;margin-bottom:-1px">'; # &#9745; or /U2611

Ver: https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel

rubo77
fuente

Es casi seguro que es mejor pegarlo en Inkscape usando la herramienta de texto (con una fuente que tenga una licencia adecuada seleccionada) y luego ejecutar un seguimiento automático, para que pueda obtener un SVG que escalará al tamaño que necesite. (Para hacerlo lo más pequeño posible, empareje un minificador SVG con algo de edición manual para reducir la cantidad de nodos en las rutas donde el seguimiento automático falló).

ssokolow

¿Cómo evitar que los caracteres Unicode se muestren como emoji en HTML desde JavaScript?

Respuestas: