Se la tua preoccupazione principale è forzare la visualizzazione monocromatica in modo che le emoji non risaltino troppo dal testo, i filtri CSS, da soli o in combinazione con il selettore di variazione Unicode, potrebbero essere qualcosa che desideri.
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>
A differenza del selettore di variazione, non dovrebbe importare come vengono renderizzate le emoji, perché i filtri CSS si applicano a tutto. (Li uso per le icone "tipo di collegamento" in formato PNG in scala di grigi su collegamenti ipertestuali che sono stati modificati per puntare alla Wayback Machine.)
Fai solo attenzione all'avvertenza . Non puoi sovrascrivere il filtro di un elemento genitore in un figlio, quindi questa tecnica non può essere utilizzata per scalare un paragrafo in scala di grigi, quindi ricolorare i collegamenti al suo interno. 😢
... tuttavia, è utile per le situazioni in cui renderai l'intera cosa un collegamento ipertestuale o non consentirai un markup ricco al suo interno. (es. titoli e descrizioni)
Tuttavia, questo non funzionerà a meno che CSS non venga effettivamente applicato, quindi fornirò una seconda opzione che è più affidabile negli <title>elementi rispetto al selettore di variazione Unicode (ti sto guardando GitHub. Non mi piacciono le icone false nel mio schede del browser):
Se stai inserendo una stringa fornita dall'utente in un <title>elemento, filtra l'emoji insieme a qualsiasi grassetto / corsivo / sottolineato / ecc. markup. (Sì, per coloro che lo hanno perso, lo standard richiede che il contenuto di <title>sia testo normale a parte gli escape della e commerciale ei browser che ho testato interpretano tutti i tag all'interno come testo letterale.)
I due modi in cui posso pensare sono:
- Usa direttamente un'espressione regolare gestita manualmente che corrisponda ai blocchi in cui la versione più recente di Unicode inserisce le sue emoji e i loro modificatori.
- Itera attraverso i grapheme cluster e scarta quelli che contengono punti di codice emoji riconosciuti. (Un grapheme cluster è un glifo di base più tutti i segni diacritici e altri modificatori che compongono il carattere visibile. L'esempio a cui mi collego usa il motore regex di Python per tokenizzare e quindi il
emojipacchetto per il database, ma Rust è un buon esempio di linguaggio dove l'iterazione di grapheme cluster è semplice e veloce tramite una cassa come unicode-segmentation.)
