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

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/