Jika perhatian utama Anda adalah memaksa tampilan monokromatik sehingga emoji tidak terlalu menonjol dari teks, filter CSS, baik sendiri atau dikombinasikan dengan pemilih variasi Unicode, mungkin adalah sesuatu yang Anda inginkan.
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>
Berbeda dengan pemilih variasi, tidak masalah bagaimana emoji ditampilkan, karena filter CSS berlaku untuk semuanya. (Saya menggunakannya untuk ikon "jenis tautan" format PNG skala abu-abu pada hyperlink yang telah dimodifikasi untuk mengarah ke Mesin Wayback.)
Pikirkan saja peringatannya . Anda tidak dapat mengganti filter elemen induk pada anak, jadi teknik ini tidak dapat digunakan untuk membuat paragraf menjadi abu-abu, lalu mewarnai ulang tautan di dalamnya. 😢
... tetap saja, ini berguna untuk situasi di mana Anda akan menjadikan semuanya sebagai hyperlink atau melarang markup kaya di dalamnya. (mis. judul dan deskripsi)
Namun, ini tidak akan berfungsi kecuali CSS benar-benar diterapkan, jadi saya akan memberikan opsi kedua yang lebih dapat diandalkan dalam <title>elemen daripada pemilih variasi Unicode (Saya melihat Anda GitHub. Saya tidak suka ikon palsu di tab browser):
Jika Anda memasukkan string yang disediakan pengguna ke dalam <title>elemen, filter emoji tersebut dengan huruf tebal / miring / garis bawah / dll. markup. (Ya, bagi mereka yang melewatkannya, standar memang meminta konten <title>menjadi teks biasa selain dari ampersand escapes dan browser yang saya uji semua menafsirkan tag di dalamnya sebagai teks literal.)
Dua cara yang bisa saya pikirkan adalah:
- Langsung gunakan regex yang dikelola secara manual yang cocok dengan blok tempat Unicode versi terbaru meletakkan emoji dan pengubahnya.
- Iterasi melalui kelompok grafik dan buang yang berisi titik kode emoji yang dikenali. (Gugus grafem adalah mesin terbang dasar ditambah semua diakritik dan pengubah lain yang membentuk karakter yang terlihat. Contoh yang saya tautkan ke menggunakan mesin regex Python untuk membuat token dan kemudian
emojipaket untuk database, tetapi Rust adalah contoh yang baik dari bahasa di mana pengulangan kelompok grafem cepat dan mudah melalui peti seperti unicode-segmentation.)
