Jeśli Twoim głównym zmartwieniem jest wymuszenie wyświetlania monochromatycznego, aby emoji nie wyróżniały się zbytnio z tekstu, filtry CSS, same lub w połączeniu z selektorem odmian Unicode, mogą być czymś, czego chcesz.
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>
W przeciwieństwie do selektora odmian, nie powinno mieć znaczenia, jak renderowane są emoji, ponieważ filtry CSS mają zastosowanie do wszystkiego. (Używam ich do skalowania ikon typu łącza w formacie PNG w skali szarości w hiperłączach, które zostały zmodyfikowane tak, aby wskazywały Wayback Machine).
Tylko pamiętaj o zastrzeżeniu . Nie możesz zastąpić filtru elementu nadrzędnego w podrzędnym, więc tej techniki nie można użyć do przeskalowania akapitu w skali szarości, a następnie ponownego pokolorowania linków w nim. 😢
... nadal jest to przydatne w sytuacjach, w których zamierzasz uczynić całość hiperłączem lub uniemożliwić w niej bogate znaczniki. (np. tytuły i opisy)
Jednak to nie zadziała, chyba że CSS faktycznie zostanie zastosowany, więc podam drugą opcję, która jest bardziej niezawodna w <title>elementach niż selektor odmian Unicode (patrzę na ciebie GitHub. Nie lubię fałszywych ikon w moim karty przeglądarki):
Jeśli umieszczasz ciąg dostarczony przez użytkownika w <title>elemencie, odfiltruj emoji wraz z pogrubieniem / kursywą / podkreśleniem / itp. narzut. (Tak, dla tych, którzy to przegapili, standard wymaga, aby zawartość <title>była czystym tekstem, poza znakami „ampersand”, a wszystkie przeglądarki, które testowałem, interpretują tagi jako tekst dosłowny).
Przychodzą mi na myśl dwa sposoby:
- Bezpośrednio użyj ręcznie obsługiwanego wyrażenia regularnego, które pasuje do bloków, w których najnowsza wersja Unicode umieszcza swoje emoji i ich modyfikatory.
- Przejdź przez klastry grafemów i odrzuć wszystkie, które zawierają rozpoznane punkty kodowe emoji. (Klaster grafemowy to glif podstawowy plus wszystkie znaki diakrytyczne i inne modyfikatory, które składają się na widoczny znak. Przykład, do którego odsyłam, wykorzystuje silnik regex Pythona do tokenizacji, a następnie
emojipakiet dla bazy danych, ale Rust jest dobrym przykładem języka gdzie iterowanie klastrów grafemowych jest szybkie i łatwe dzięki skrzynce takiej jak unicode-segmentation).
