Bazen sosyal medyada gezinirken, paylaşılan örnek kod görselleri ve içerisinde kullanılan bazı emojiler olduğunu görmüş olabilirsiniz. Bu yazı içerisinde hem yazdığımız kodları kolayca nasıl görselleştirebiliriz hem de içerisine emoji eklemek istersek bunu nasıl yapabiliriz sorularına cevap bulmaya çalışalım.
HTML, CSS ve JavaScript kodlarımız da emoji kullanmak için aşağıda bazı yöntemler bulunmakta:
HTML’de Emoji Kullanımı
HTML’de emoji kullanmak için yapmamız gereken ilk şey belgenin karakter kodlamasını aşağıdaki gibi UTF-8 olarak ayarlamak. Bu, emojilerimizin çeşitli tarayıcı ve cihazlarda tutarlı bir şekilde görüntülenmesini sağlıyor.
|
<meta charset=“UTF-8”></meta>
|
Düzenlemeyi bu şekilde yaptıktan sonra emojiyi 2 farklı şekilde görüntüleyebiliyoruz. Birinci yolu, emojiyi doğrudan HTML içerisinde kullanmakken, diğer yolu ise emojiyi sayısal gösterimi ile belirtmektir.
Emojiyi Doğrudan Kullanma
Bir emojiyi görüntülemenin en kolay yolu, kopyala-yapıştır yapmak, fakat öncelikle emojileri kopyalamamıza izin veren bir web sitesine ihtiyacımız var. Bunun için Emojipedia adresinde oldukça güzel emojiler bulunuyor.
Emojinizi bulduğunuzda, emojiyi kolayca görebileceğiniz ve kopyalayabileceğiniz bir bölüm bulunmakta:
Kopyaladıktan sonra, amaçlanan hedefe yapıştırmanız yeterli:
Emojiler metin tabanlı içerik olarak değerlendirildiğinden, bunları belgenizde metnin desteklendiği hemen her yere yapıştırabilirsiniz.
Fakat emojiler nihayetinde görsel yapılardır ve anlamsal olarak birşey ifade etmeyebilirler. Erişilebilirliğinin sağlanmasında role ve aria-label etiketlerini kullanabiliriz.
🍏
|
<p role=“img” aria–label=“Green Apple”>🍏</p>
|
Emoji Codepoints Kullanma
Emoji görüntülemek için kopyala-yapıştır yapmak işe yaramadıysa, kullanmak istediğiniz emojinin sayısal gösterimini kullanabilirsiniz. Herhangi bir emoji için Emojipedia adresinde aşağı kaydırırsanız, kullanabileceğiniz sayısal gösterimini (Codepoints) görebilirsiniz.
Yeşil Elma emojisi için kod noktası U+1F34F’tür. Fakat bu emojiyi Codepoints kullanarak HTML’de kullanmak için, değeri biraz değiştirmek gerekiyor. Codepoints başından U+1 kaldırıp &#x karakterlerini ekleyin.
Görünüm aşağıdaki gibi olmalı:
Belgenizi tarayıcınızda önizlediğinizde, daha önce incelediğimiz kopyala-yapıştır çözümüne kıyasla biçimlendirmemizde garip görünmesine rağmen, yeşil elma emojisinin doğru görüntülendiğini görmeye devam edeceksiniz.
CSS’de Emoji Kullanımı
HTML’de kullandığımız bazı yöntemler CSS içinde geçerli fakat bazı ufak değişiklikler gerekiyor.
Emojiyi doğrudan belirtebilir:
h1::before {
content: “🍏”;
}
|
h1::before { content: “🍏”; }
|
ya da Codepoints kullanabilirsiniz:
h1::before {
content: “ 1F34F”;
}
|
h1::before { content: “ 1F34F”; }
|
Buradaki durum HTML’dekinden biraz farklı, tek yapılması gereken baştaki U+‘yı kaldırıp önüne karakterlerini eklemek.
JavaScript’te Emoji Kullanımı
Bakacağımız son şey, JavaScript’te emojilerin nasıl kullanılacağı. Kopyala-yapıştır yöntemi burada da işe yaramaktadır.
document.body.innerText = “🍏”;
|
document.body.innerText = “🍏”;
|
JavaScript’te Codepoints kullanmak ise hem HTML hem de CSS’den biraz farklıdır.
Yukarıdaki kullanım yerine Codepoints kullanarak kullanmamız için öncelikle ilgili Codepoints’i String.fromCodePoint(code) metodundan geçirmemiz gerekiyor. Bu yöntem argüman olarak bir codepoint değeri alır ve verilen sayısal değere göre bir karakter döndürür. Fakat, Codepoints’i, String.fromCodePoint(code) metodundan geçirmeden önce aşağıdaki gibi başındaki U+ yerine 0x karakterlerini eklemeliyiz.
document.body.innerText = String.fromCodePoint(0x1F34F);
|
document.body.innerText = String.fromCodePoint(0x1F34F);
|
ÖNEMLİ!
Emojiler, bulunduğunuz uygulama veya platforma özgü olduğundan, emojiler farklı kullanıcılar için farklı görünebilir. Bazı geliştiriciler için bu tutarsızlık istenen bir durum değildir. Bunun yerine yaptıkları şey, tutarlılığı sağlayabilmeleri için emojileri SVG veya PNG biçiminde yeniden oluşturmak. Bunun için Twemoji projesi güzel bir örnek!
Peki, kodlarımı aşağıdaki gibi nasıl gösterebilirim? 
Bunun için, kodlarınızı carbon.now.sh adresine girdikten sonra ilgili alana kopyalamanız yeterli, kullanması oldukça basit. Kodlarınızı İlgili alana kopyaladıktan sonra kendinize göre istediğiniz ayarlamaları yapabilir, export diyerek hızlıca çıktı alabilirsiniz.
Kaynaklar:
https://unicode.org/emoji/charts/full-emoji-list.html
https://www.webfx.com/tools/emoji-cheat-sheet/
https://www.kirupa.com/html5/emoji.htm
https://www.w3schools.com/html/html_emojis.asp
https://emojipedia.org/