Wenn Ihr Hauptanliegen darin besteht, die monochromatische Anzeige zu erzwingen, damit sich das Emoji nicht zu stark vom Text abhebt, sind CSS-Filter entweder allein oder in Kombination mit dem Unicode-Variationswähler möglicherweise das Richtige für Sie.
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>
Im Gegensatz zur Variationsauswahl sollte es keine Rolle spielen, wie die Emoji gerendert werden, da CSS-Filter für alles gelten. (Ich verwende sie, um "Link-Typ" -Symbole im PNG-Format in Hyperlinks zu skalieren, die so geändert wurden, dass sie auf die Wayback-Maschine verweisen.)
Nur beachten Sie die Einschränkung . Sie können den Filter eines übergeordneten Elements in einem untergeordneten Element nicht überschreiben. Daher kann diese Technik nicht verwendet werden, um einen Absatz in Graustufen zu skalieren und die darin enthaltenen Links neu zu färben. 😢
... dennoch ist es nützlich für Situationen, in denen Sie entweder das Ganze zu einem Hyperlink machen oder ein umfangreiches Markup darin nicht zulassen. (zB Titel und Beschreibungen)
Dies funktioniert jedoch nur, wenn CSS tatsächlich angewendet wird. Daher gebe ich eine zweite Option an, die in <title>Elementen zuverlässiger ist als der Unicode-Variationsselektor (ich sehe dich an, GitHub. Ich mag keine gefälschten Symbole in meinem Browser-Registerkarten):
Wenn Sie eine vom Benutzer bereitgestellte Zeichenfolge in ein <title>Element einfügen, filtern Sie das Emoji zusammen mit Fett / Kursiv / Unterstrichen / etc. Heraus. Markup. (Ja, für diejenigen, die es verpasst haben, fordert der Standard, dass der Inhalt von <title>Klartext abgesehen von den kaufmännischen Und-Zeichen und den Browsern, die ich getestet habe, alle Interpretations-Tags als wörtlichen Text enthält.)
Ich kann mir zwei Möglichkeiten vorstellen:
- Verwenden Sie direkt einen manuell verwalteten regulären Ausdruck, der den Blöcken entspricht, in denen die neueste Version von Unicode das Emoji und ihre Modifikatoren platziert.
- Durchlaufen Sie die Graphemcluster und verwerfen Sie alle, die erkannte Emoji-Codepunkte enthalten. (Ein Graphemcluster ist eine Basis-Glyphe sowie alle diakritischen Zeichen und andere Modifikatoren, aus denen das sichtbare Zeichen besteht. Das Beispiel, auf das ich verweise, verwendet die Regex-Engine von Python zum Tokenisieren und dann das
emojiPaket für die Datenbank, aber Rust ist ein gutes Beispiel für eine Sprache wo das Iterieren von Graphemclustern schnell und einfach über eine Kiste wie unicode-segmentation.)
