Como evitar que caracteres Unicode sejam renderizados como emoji em HTML a partir de JavaScript?

119

Estou encontrando Unicode para caracteres especiais na pesquisa de FileFormat.Info .

Alguns caracteres são renderizados como os glifos clássicos em preto e branco, como ⚠ (sinal de aviso \u26A0ou ⚠). Eles são preferíveis, já que posso aplicar estilos CSS (como cores) a eles.

Outros são renderizados como emojis de desenho animado mais recentes, como ⌛ (ampulheta \u231Bou ⌛). Eles não são preferíveis, já que não posso estilizá-los totalmente.

Parece que o navegador está fazendo essa alteração, já que consigo ver o glifo da ampulheta no Mac Firefox, mas não no Mac Chrome nem no Mac Safari.

Existe uma maneira de forçar os navegadores a exibir as versões mais antigas (monótona plana)?

Atualização : Parece que (a partir de comentários abaixo) há um seletor de apresentação do texto , FE0E, disponível para impor texto-vs-emoji. O seletor é concatenado como um sufixo sem espaço no código do personagem, como ⌛︎para HTML hexadecimal ou \u231B\uFE0Epara JS. No entanto, simplesmente não é respeitado por todos os navegadores (por exemplo, Chrome e Edge).

javascript html css unicode emoji Aritmomaníaco
fonte

você define uma família de fontes em suas regras de CSS?

G-Cyrillus

2

Possível duplicata de Glifos / Símbolos de Emoji Unicode Inconsistentes

一二三

1

@janaspage ︎e \uFE0Eestão corretos (2 e 8) e funcionam bem no Safari (8 e 9), mas como diz a resposta: o suporte do navegador está irregular e o Chrome (46) está completamente quebrado.

一二三

2

Simplesmente não há uma maneira padrão de controlar a renderização de Emojis.

nwellnhof

1

Tudo que você precisa fazer é aplicar uma fonte que contenha glifos para esses caracteres, e cujos glifos tenham a aparência que você deseja (sem cores, sem formas ou o que você preferir).

ShreevatsaR

133

Acrescente o caractere do seletor de variação Unicode para forçar o texto, VS15 ︎,.
Isso força o caractere anterior a ser renderizado como texto em vez de um símbolo de Emoji.

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

Resultado: 🔒︎

Saiba mais em: símbolo Unicode como texto ou emoji

Huang
fonte

1

Isso é muito útil, e é por isso que votei a favor outro dia. Eu me pergunto como posso colar um emoji e esse personagem invisível em um anúncio do Facebook que estou escrevendo? PS: Isso também foi interessante: apple.stackexchange.com/a/240450/53510

Ryan,

3

Acabei de perceber que esse ︎truque não funciona comigo para certas fontes. Estou tendo dificuldade em encontrar uma fonte que possa ser razoavelmente instalada em todas as máquinas (Windows, iOS, Mac, Android, etc).

Ryan

12

Esta solução realmente não é aceitável para símbolos que podem ocorrer até mesmo em campos de entrada. Estou tendo esse problema com o símbolo ↔ usado na lógica, e não consigo entender por que alguém pensa que isso deveria ser um emoji!

frabjous de

2

A página a seguir é útil para copiar e colar esse caractere especial imediatamente após um emoji para fazer com que pareça plano em vez de estilizado. Por exemplo, você pode ver 💬︎ em vez de 💬 e 🌟︎ em vez de 🌟 e ⌛︎ em vez de ⌛ e 🔒︎ em vez de 🔒 (dependendo do seu dispositivo) unicode-symbol.com/u/FE0E.html

Ryan

14

Isso é renderizado como um emoji no exemplo para mim, chrome 71 no mac 10.11.6.

lahwran

13

Eu tinha um caractere Unicode no contentde a span::beforee tinha o font-familydospan definido como "Segoe UI Symbol". Mas o Chrome usou "Segoe UI Emoji" como fonte para renderizá-lo.

No entanto, quando eu defini o font-familycomo "Segoe UI Symbol" explicitamente para o span::before, em vez de apenas para o span, então funcionou.

Glia
fonte

Essa deve ser a resposta correta, especialmente porque o antigo método do caractere invisível não é aceito pela maioria dos navegadores principais.

Sarah C. Corriher

2

Para uma solução somente CSS para evitar que o iOS exiba emojis, você pode usar o font-family: monospacepadrão para a variante de texto do glifo em vez da variante de emoji.

cmbuckley
fonte

1

As fontes do Android não são ricas como você pode esperar. Os arquivos de fonte não têm esses glifos exóticos e o Android tem um hack para poucos caracteres sem glifos. Eles são substituídos por ícones.

Portanto, a solução é integrar o site a uma fonte web (woff). Crie um novo arquivo de fonte com FontForge e escolha o glifo necessário do TTF serif livre, por exemplo. Cada glifo leva 1k. Gerar arquivo woff.

Prepare CSS simples para importar a família de fontes personalizadas.

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;
}

arquivo 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
fonte

1

Se sua principal preocupação é forçar a exibição monocromática para que o emoji não se destaque muito do texto, os filtros CSS, sozinhos ou em combinação com o seletor de variação Unicode, podem ser algo que você queira.

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 trecho

Ao contrário do seletor de variação, não deve importar como o emoji é renderizado, porque os filtros CSS se aplicam a tudo. (Eu os uso para ícones de "tipo de link" em tons de cinza em formato PNG em hiperlinks que foram modificados para apontar para a Máquina Wayback.)

Basta observar a advertência . Você não pode substituir o filtro de um elemento pai em um filho, portanto, essa técnica não pode ser usada para dimensionar um parágrafo em tons de cinza e, em seguida, recolorir os links dentro dele. 😢

... ainda assim, é útil para situações em que você fará de tudo um hiperlink ou não permitirá a marcação avançada dentro dele. (por exemplo, títulos e descrições)

No entanto, isso não funcionará a menos que CSS realmente seja aplicado, então darei uma segunda opção que é mais confiável em <title> elementos do que o seletor de variação Unicode (estou olhando para você GitHub. Não gosto de ícones falsos no meu guias do navegador):

Se você estiver colocando uma string fornecida pelo usuário em um <title>elemento, filtre o emoji junto com qualquer negrito / itálico / sublinhado / etc. marcação. (Sim, para aqueles que não perceberam, o padrão exige que o conteúdo de <title>seja um texto simples, além dos escapes do E comercial e todos os navegadores em que testei interpretam as tags como texto literal.)

As duas maneiras que posso pensar são:

Use diretamente um regex mantido manualmente que corresponda aos blocos onde a versão mais recente do Unicode coloca seu emoji e seus modificadores.
Repita os clusters de grafemas e descarte qualquer um que contenha pontos de código de emoji reconhecidos. (Um cluster de grafema é um glifo de base mais todos os diacríticos e outros modificadores que compõem o caractere visível. O exemplo que vinculo usa o mecanismo regex do Python para tokenizar e, em seguida, o emojipacote para o banco de dados, mas Rust é um bom exemplo de linguagem onde a iteração de clusters de grafemas é rápida e fácil por meio de uma caixa unicode-segmentation.)

ssokolow
fonte

0

O Google Chrome, versão para desktop 75, parece eliminar a ambigüidade de sua abordagem para renderizar caracteres Unicode com base no primeiro escape Unicode que encontra ao carregar uma página. Por exemplo, quando analisado como o primeiro escape HTML Unicode em uma fonte de página e não tendo equivalente emoji, & # 9207; parece esclarecer para o Chrome que a página contém escapes que não devem ser renderizados como emoji.

Clay Allen
fonte

0

Expandindo a resposta de ssokolow , usar um filtro é bom e pelo menos torna os contornos visíveis em vez de usar uma fonte simples, mas converter uma cor RGB em uma sequência de filtros CSS é muito difícil quando você quer usar uma cor específica.

Uma opção melhor (embora bastante prolixo) é usar o <feColorMatrix>filtro SVG. Combinado com o filtro de tons de cinza e o esquema de URI de dados, você pode representar a cor via RGB e CSS in-line:

.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");
}

Infelizmente, você não pode interpolar a URL com dados (obtidos de atributos ou variáveis), mas pelo menos você não precisa calcular filtros CSS de RGB.

IllidanS4 quer Monica de volta
fonte

-2

Não sei como desligar a renderização do tipo emoji. Normalmente, eu uso uma fonte de ícone, como fonte awesome ou glyphicons (vem com Bootstrap 3).

A vantagem de usá-los sobre os caracteres Unicode é que

você pode escolher entre muitos estilos diferentes para que se encaixem no design do seu site;
eles são consistentes em todos os navegadores (se você já tentou fazer um caractere de estrela Unicode, notará que é diferente no IE em relação a outro navegador);
além disso, eles são totalmente estilizáveis, como os caracteres Unicode que você está tentando usar.

A única desvantagem é que é mais uma coisa para o navegador baixar ao visualizar sua página.

dave.mcalpine
fonte

-2

Para mim no OSX, a solução foi definir a família de fontes para EmojiSymbols

Nathan
fonte

-3

Nenhuma das soluções acima funcionou para a extensão "Emoji para Google Chrome".

Então, como solução alternativa , fiz uma captura de tela do caractere Unicode 'BALLOT BOX WITH CHECK' (U + 2611) e adicionei-o como imagem com php:

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

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

rubo77
fonte

Quase certamente melhor colá-lo no Inkscape usando a ferramenta de texto (com uma fonte que tenha uma licença adequada selecionada) e, em seguida, executar um rastreamento automático, para que você possa obter um SVG dele que será dimensionado para qualquer tamanho que você precisar. (Para torná-lo o menor possível, emparelhe um minificador SVG com alguma edição manual para reduzir o número de nós em caminhos onde o rastreamento automático foi

malfeito

Como evitar que caracteres Unicode sejam renderizados como emoji em HTML a partir de JavaScript?

Respostas: