網頁

2016年5月8日

|

2016 表情符號 ( Unicode Emoji 格式 ) 顯示策劃

Views:
Blogspot 留言使用表情符號問題, 多年來都是"土砲"制作,
用上 Yahoo 的圖像, 用上可動插畫的 ...

在手機上, 不論 Android / IOS 都可以好好顯示 Emoji 彩色圖像了.
因為 Emoji 已經是 Unicode 對應.

今日 Win10 已經面世差不多一年, 跟隨的瀏覽器也有大的改進...
Chorme PC版本 50.0.2661.94 m (8-May-2016 記錄)
Edge PC版本 20.10240.16384.0 (8-May-2016 記錄)
可以輸入 Unicode Emoji ... (Win10 有它的 Emoji 浮動鍵盤)

也可以顯示, 但是 ... 黑白的.
當然, 用回老方法, innerHTML.replace 找出它們的 Unicode, 換上對應的 Emoji 圖像.
彩色的可愛小公仔, 通通跑出來.

好了上主菜, 2 個主要文件, CSS & Javascript.
blogger 應該不會陌生的一個方法,
[設計]>[版面配置]>[新增小工具]>[HTML/Javascript]>
貼上 CSS (所有 Emoji 圖像對應 url, 以及圖像格式控制)
~~ 這次選用的是 Googel email 裡顯示的 Emoji 圖像. ~~ e.g. https://mail.google.com/mail/e/1f601

<link href='https://drive.google.com/file/d/0B9w7kASMsnuxdGxZSEVNUE5GdjA/view' rel='stylesheet' type='text/css'/>

因為內容十分長, 所以用了 link CSS 的方法, 你可以打開看看, 打它的內容全部複製下來,
貼入 "HTML/JavaScript" 小工具裡, 只要在之前及之後加入 style 標籤...
<style>
--- CSS 文件內容 ---
</style>
或是儲存它成為你自家的 CSS 文件, 放在個人可外連空間, 再用 CSS link 回網誌即可.
開首可自己改動的2 項,
height: 20px;
width: 20px;
它是圖像的大小, 我設定為 20px, 可以加大 e.g. 32px, 或是改細 e.g. 16px

另一段是 Javascript (抽出 Emoji 的 unicode, replace CSS 相應圖片 url)
同樣的貼到 CSS HTML/Javascript小工具裡.

<script>
c = document.getElementById("comment-holder");
if (c) {
  p = c.getElementsByTagName("p");
  for (i=0; i<p.length; i++) {
    if (p[i].getAttribute("CLASS") == "comment-content") {
      str = p[i].innerHTML.replace( /\ud83c[\udc00-\udfff]|\ud83d[\udc00-\ude4f]|\ud83d[\ude80-\udeff]|[\u2030-\u3299]|\u00a9|\u00ae/gi , '<span class="emoji" data-emoji="$&"></span>');
      p[i].innerHTML = str
    }
  }
};
</script>

這次處理的共有 831 個圖像對換 (Win10 Emoji 鍵盤可輸入的), 一次過轉換, 可能有點慢.
所以只針對留言區為處置位置. 而且在網誌裡, 或是小工具裡直接寫入 Uni-Emoji, 日後是一個可怕的處理問題, 不搞為上策.

參考網站:
http://crocodillon.com/blog/parsing-emoji-unicode-in-javascript
https://r12a.github.io/apps/conversion/
http://apps.timwhitlock.info/emoji/tables/unicode
http://emojipedia.org/slightly-smiling-face/
http://emojicss.com/

7 則留言:

  1. Win10 鍵盤 (頭像)
    😃😊😞😉😁😂😄😅😆😇😈😋😌😍😎😏😐😒😓😔😖😘😚😜😝😠😡😢😣😤
    😥😨😩😪😫😭😰😱😲😳😵😶😷☺☹😀😑😕😗😙😛😟😦😧😬😮😯😴🙁🙂
    👀👂👃👄👅👆👇👈👉👊👋👌👍👎👏👐🙈🙉🙊🙅🙆🙇🙋🙌🙍🙎🙏☝✊✋
    ✌🖐🖖❤💓💔💕💖💗💘💙💚💛💜💝💞💟👤👥👦👧👨👩👪👫👬👭👮👯👰
    💙💚💛💜💝💞💟👤👥👦👧👨👩👪👫👬👭👮👯👰👱👲👳👴👵👶👷💁💂💃

    回覆刪除
  2. Win10 鍵盤 (節日, 音樂)
    🎈🎀🎁🎂🎃🎄🎅🎆🎇🎉🎊🎌🎍🎎🎏🎋🎐🎑🎒🎓💋💌💍💎💏💐💑💒👸👹
    👺👻👼👽👾👿💀🎽🎾🎿🏀🏁🏂🏃🏄🏆🏈🏊⚽⚾🏇🏉🚴🚵💄💅💆💇💈💉
    💊🎠🎡🎢🎣🎤🎥🎦🎧🎨🎩🎪🎫🎬🎭🎮🎯🎰🎱🎲🎳🎴🀄🔬🔭🎵🎶🎷🎸🎹
    🎬🎭🎮🎯🎰🎱🎲🎳🎴🀄🔬🔭🎵🎶🎷🎸🎹🎺🎻🎼📯📷📹📺📻📼♠♣♥♦

    回覆刪除
  3. Win10 鍵盤 (食物,衣服,文具)
    🍕🍔🍖🍗🍘🍙🍚🍛🍜🍝🍞🍟🍠🍡🍢🍣🍤🍥🍦🍧🍨🍩🍪🍫🍬🍭🍮🍯🍰🍱
    🍲🍳🔪🍴🍵🍶🍷🍸🍹🍺🍻☕🍼🍅🍆🍇🍈🍉🍊🍌🍍🍎🍏🍑🍒🍓🍋🍐📝📞
    📟📠📡📢📣📤📥📦📧📨📩📪📫📮📰📬📭📱📲📳📴📶📵🔥🔦🔧🔨🔩🔫🔮
    🔯🔱👑👒👓👔👕👖👗👘👙👚👛👜👝👞👟👠👡👢👣💻💼💽💾💿📀📁📂📃
    📄📅📆📇📈📉📊📋📌📍📎📏🔊🔇🔈🔉🔅🔆📐📑📒📓📔📕📖📗📘📙📚📛
    📐📑📒📓📔📕📖📗📘📙📚📛📜☎✂✉✏✒🕐🕑🕒🕓🕔🕕🕖🕗🕘🕙🕚🕛

    回覆刪除
  4. Win10 鍵盤 (交通,建築)
    ✈🚀🚁🚃🚄🚅🚇🚉🚌🚏🚑🚒🚓🚕🚗🚙🚚🚂🚆🚈🚊🚋🚍🚎🚐🚔🚖🚘🚛🚜
    🚝🚞🚟🚠🚡🚢🚤🚣💺🚥🚦🚧🚨⛔🅿⭕🔰🚩🚪🚫🚬🚭🚲🚶🚹🚺🚻🚼🚮🚯
    🚰🚱🚳🚷🚸🚽🚾🛀🚿🛁♿⚠⚡♻🏠🏡🏢🏣🏥🏦🏧🏨🏩🏪🏫🏬🏭🏮🏯🏰
    ♻🏠🏡🏢🏣🏥🏧🏦🏨🏩🏪🏫🏬🏭🏮🏯🏰♨⚓⛪⛲⛳⛵⛺⛽🏤🛂🛃🛄🛅

    回覆刪除
  5. Win10 鍵盤 (天氣,動物,植物)
    ⛅🌀🌁🌃🌄🌅🌆🌇🌈🌉🌊🌋🌌☄🌑🌓🌔🌕🌒🌖🌗🌘🌙🌛🌚🌜🌝🌟🌠☀
    🌞🌂☁☔☂⛄☃✨✳✴❄❇⭐🐌🐍🐎🐑🐒🐔🐗🐘🐙🐚🐛🐜🐝🐞🐟🐠🐡
    🐢🐣🐤🐥🐦🐧🐨🐩🐫🐬🐭🐮🐯🐰🐱🐲🐳🐴🐵🐶🐷🐸🐹🐺🐻🐼🐽🐾😸😹
    😺😻😼😽😾😿🙀🐀🐁🐂🐃🐄🐅🐆🐇🐈🐉🐊🐋🐏🐐🐓🐕🐖🐪🌰🌱🌴🌵🌷
    🐈🐉🐊🐋🐏🐐🐓🐕🐖🐪🌰🌱🌴🌵🌷🌸🌹🌺🌻🌼🌽🌾🌿🍀🍁🍂🍃🍄🌲🌳

    回覆刪除
  6. Win10 鍵盤 (符號)
    ⁉‼❓❔❕❗☑✅✔❌❎➕➖✖➗©®™🌏🌍🌎🌐🗻🗼🗽🗾🗿➰➿⤴
    ⤵⬛⬜〰〽💠💡💢💣💤💥💦💧💨💩💪💫💬💭💮💯💰💱💲💳💴💵💶💷💸
    💹🔙🔚🔛🔜🔝↔↕↖↗↘↙↩↪➡⬅⬆⬇🔀🔁🔂🔄🔲🔳🔴🔵🔶🔷🔸🔹
    ▪▫▶◀◻◼◽◾🔟ℹ🔞Ⓜ⚪⚫🉐🉑㊗㊙🅰🅱🅾🆎🆑🆒🆓🆔🆕🆖🆗🆘
    🆙🆚🈁🈂🈚🈯🈲🈳🈴🈵🈶🈷🈸🈹🈺🔃🔋🔌🔍🔎🔏🔐🔑🔒🔓🔔🔕🔖🔗🔘
    🔠🔡🔢🔣🔤🔺🔻🔼🔽⌚⌛⏩⏩⏪⏫⏬⏰⏳♈♉♊♋♌♍♎♏♐♑♒♓⛎

    回覆刪除

★ 謝謝留言,留下的一句話,已經是很好的推動力 !
★ 勾選右下角的「通知我 」可以由電郵收到留言回覆!
★ 留言與文章無關的主題時,請到頂列「留言版 GuestBook」暢所欲言。
★ 若發佈留言後,留言不見了。可能被系統錯誤判斷為垃圾留言,請不用擔心,我會盡快將留言恢復。
◎ 本留言區已經支援 Unicode Emoji,對應 Win10 的浮動鍵盤。歡迎貼上,增加效果。
◎ 支援 YouTube 超連結對應,支援 jpg , jpeg , gif , png 這4種圖片顯示格式。
◎ 文章介紹 2016 表情符號 V2 更新版 ( Unicode Emoji 格式 ) 顯示策劃