Pengubah nada kulit emoji: Panduan Pemprosesan Programatik

Bukan rahsia lagi bahawa emoji mempunyai pelbagai warna kulit. Terutama dalam teks dan media sosial, mereka sangat popular. ?? (Rising Black Fist) Emojis bahkan dinamakan "Emoji Terbaik 2020" oleh Anugerah Emoji Dunia Emojipedia.

Setiap warna kulit adalah pengubah suai, dan banyak emojis terdiri daripada pengubah dan pengekodan asas yang sesuai dengan aksara tertentu. Malangnya, tidak setiap perpustakaan emoji menyokong pengubah. Tetapi memandangkan popularitinya, pengubah nada kulit emoji lebih banyak daripada ciri "icing on the cake". Selain itu, mereka juga merupakan cara yang bijak untuk bekerja kerana mereka membenarkan kami menulis lebih banyak kod modular dan lebih cekap.

Oleh itu, tujuan artikel ini adalah untuk mengetahui cara memproses pengubah emoji secara programatik. Dengan cara ini, jika anda menghadapi situasi di mana nada kulit tidak disokong, atau ingin membuat varian tersuai emojis lain, anda tahu apa yang perlu dilakukan!

Kaedah penggredan nada kulit fitzpatrick

Pengubah nada kulit secara rasmi ditambah kepada emoji pada tahun 2015 sebagai sebahagian daripada Unicode 8.0. Mereka didasarkan pada kaedah penarafan nada kulit Fitzpatrick, klasifikasi formal nada kulit manusia. Jadual berikut menunjukkan bagaimana watak emoji sepadan dengan jenis Fitzpatrick:

Dalam kes penggunaan yang paling mudah, apabila salah satu daripada watak -watak ini dilampirkan pada emoji yang menyokong pengubah nada kulit, ia mengubah nada kulit emoji.

Dengan kata lain :? ? = ??

Sapukan pengubah warna kulit menggunakan CSS

Untuk beralih antara nada kulit emoji menggunakan CSS, kita akan bermula dengan watak Emoji Asas (?) Dan kemudian pasangkan nada kulit menggunakan ::after pemilih pseudo.

Di samping menggunakan aksara emoji yang diberikan, kita juga boleh menggunakan kod heksadesimal unicode:

Gunakan JavaScript untuk mengeluarkan dan menukar pengubah warna kulit

Bagaimana jika emoji yang diproses telah menggunakan pengubah nada kulit? Untuk melakukan ini, kita perlu melampaui CSS. Berikut adalah contoh menggunakan JavaScript:

Apa yang berlaku di sini? Pertama, kita mulakan dengan emoji bayi dengan Fitzpatrick Type 4. Ia kemudiannya diserahkan kepada fungsi removeModifier , yang mencari pengubah nada kulit dan menghilangkannya dari rentetan. Sekarang kita mempunyai emojis tanpa pengubah, kita boleh menambah sebarang pengubah yang kita suka.

Walaupun pendekatan ini berfungsi untuk banyak emojis, kami mempunyai masalah ketika memperkenalkan pengubah lain. Itulah sebabnya kita perlu berbincang sekarang ...

Memproses urutan ZWJ

Urutan penyambung sifar (ZWJ) adalah seperti perkataan kompaun Unicode. Mereka terdiri daripada dua atau lebih emojis yang dihubungkan dengan penyambung sifar lebar u 200d.

Urutan ZWJ paling biasa digunakan untuk menambah pengubah jantina kepada emojis. Sebagai contoh, weightlifter ditambah ZWJ, ditambah simbol wanita, bersamaan dengan wanita angkat berat (onton? ? ♀? =? Onton ?♀ ?♀ ?♀ ?♀ ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀? ♀?

Apabila memproses urutan ZWJ, anda perlu memberi perhatian kepada perkara berikut:

• Urutan ini hanyalah cadangan. Mereka datang dari Perikatan Unicode dan tidak dijamin disokong pada setiap platform. Jika platform tidak menyokong mereka, urutan sandaran emojis biasa akan dipaparkan.
• Jika pengubah nada kulit hadir, ia mesti dimasukkan selepas emoji tetapi sebelum ZWJ.
• Sesetengah urutan ZWJ mengandungi pelbagai emojis, masing -masing dengan pengubah nada kulit yang berbeza.

Memandangkan maklumat ini, kita perlu membuat perubahan berikut kepada contoh kod sebelumnya:

• Pengubah nada kulit perlu dimasukkan selepas mana -mana emoji asas, bukan hanya melekat pada akhir emoji.
• Sekiranya terdapat banyak emojis dalam urutan ZWJ dengan pengubah nada kulit, anda perlu menggantikan pengubah suai untuk setiap emoji.

had

Dari contoh ini, anda dapat melihat batasan konsistensi. Pandangan editor memaparkan setiap watak dalam urutan ZWJ, kecuali pengubah nada kulit, yang segera digunakan untuk emojis yang sepadan. Sebaliknya, konsol atau paparan hasil akan cuba menjadikan watak -watak keseluruhan urutan.

Sokongan untuk ini berbeza dari platform ke platform. Sesetengah editor mungkin cuba menjadikan urutan ZWJ, dan tidak semua pelayar menyokong set urutan ZWJ yang sama.

Di samping itu, menambah nada kulit ke urutan ZWJ memerlukan mengetahui apa yang digunakan sebagai emoji asas. Walaupun ini agak mudah dalam kes di mana emojis disediakan oleh koleksi yang diketahui, perkara -perkara boleh menjadi lebih sukar jika kita mahu dapat mengendalikan input sewenang -wenang dari pengguna.

Juga, ambil perhatian bahawa penyelesaian CSS dalam artikel ini tidak serasi dengan urutan ZWJ.

Isu membimbing pembangunan

Saya telah menyusun beberapa soalan yang mungkin perlu anda tanyakan kepada diri sendiri semasa merancang sistem yang perlu berurusan dengan pengubah nada kulit emoji:

• Bolehkah saya mengawal apa emojis sistem saya akan berinteraksi?
• Adakah perpustakaan emoji saya mengandungi maklumat mengenai emojis yang menyokong pengubah nada kulit?
• Adakah sistem saya perlu menambah, memadam, atau menukar pengubah?
• Adakah platform saya menyokong urutan ZWJ? Jika ya, yang mana?
• Adakah sistem saya perlu menyokong urutan ZWJ dengan pengubah nada kulit berganda?

Mudah -mudahan dengan jawapan kepada soalan -soalan ini dan contoh -contoh yang kita lihat di sini, anda akan mempunyai semua yang anda perlukan untuk menyokong pengubah nada kulit emoji apabila diperlukan.

Atas ialah kandungan terperinci Menukar Nada Kulit Emoji Programmatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!