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>
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.)
