傑克! 真是太神奇了!

有關 Unicode 的編碼規則及 Unicode 的 BOM 可以參閱我的這一篇貼文:
"Python: 關於 Unicode 的 BOM"

在 HTML 中表示 Unicode 字元

HTML 的內容直接有支援 Unicode, 所以直接輸入或者貼上 Unicode (並以 UTF-8 編碼存檔) 即可. 不過由於部份符號有輸入 (或顯示/辨識) 的問題, 同時也為了 browser 轉譯頁面內容時不會產生定義糢糊不明的情況, HTML 還定義了一些特殊符號以編碼值轉譯的方式輸入: 例如:

• <字符用&lt;表示
• >字符用&gt;表示
• &字符用&amp;表示
• 不合併縮減的空白字符用&nbsp;表示

上面用的是字符的名字 (或縮寫)_(註一). 除此之外, 還可以直接用字符的 10 進制編碼或 16 進制編碼表示:

• 10 進制: 以&#+10 進制編碼值+;表示_(註二).
• 16 進制: 以&#x+16 進制編碼值+;表示_(註二).

例如:

• <字符用&#60;或&#x3C;表示
• >字符用&#62;或&#x3E;表示
• &字符用&#38;或&#x26;表示
• 不合併縮減的空白字符用&#160;或&#xA0;表示

在 CSS 中表示 Unicode 字元

一般, CSS 檔裡用不到 Unicode, 除了設定 content 的內容字串. 一樣的, 你可以直接使用 Unicode 字元 (並以 UTF-8 編碼存檔), 或者使用編碼值轉譯的方式 (不論在 CSS 檔或者 HTML 檔裡的 <style> 段落). CSS 的編碼值轉譯的格式如下:

• 以\+16 進制編碼值表示 (不能用 10 進制編碼值).
• 16 進制編碼值, 長度最長為 6 個字元 (即包含 Unicode 全部的編碼空間), 前導的 0 可以不寫. 但是, 當 Unicode 字符後面接續的是 0~9, A~F (或者小寫的a~f) 時, 有二種處理方法_(註三):

1. 前導的 0 不可以省略, 16 進制編碼值長度必需填滿 6 個字元.
2. 二者之間加上一個空白字元. 此時, 必需以一對 CR/LF (0x0D+0x0A) 來替代空白字元. 當然如果不會產生疑義的話直接用\20也是可以的.

直接用 Unicode 的例子:

a.up::after   { content: " ↓"; }
a.down::after { content: " ↑"; }

使用 Unicode 編碼值轉譯的方式, 例如:

a.up::after   { content: " \2193"; }
a.down::after { content: " \2191"; }

特殊 CASE 的例子: (a tag 前後附加 "&B W")

a.up::after   { content: "\26 B\0D\0AW"; }
a.down::after { content: "\000026B W"; }

在 JS 中表示 Unicode 字元

JavaScript 同樣有支援 Unicode. 所以在 JS 的字串裡你可以直接使用 Unicode 字元 (並以 UTF-8 編碼存檔), 或者使用編碼值轉譯的方式. JS 字串的 Unicode 編碼值轉譯的格式如下:

• Unicode 的字符以\u+16 進制編碼值表示.
  16 進制編碼值長度固定為 4 碼. 支援 UTF-16 的 Surrogate Pair 格式_(註二).
• ES6 新增 Unicode 字符以\u{+16 進制編碼值+}表示.
  16 進制編碼值範圍為 0x0~0x10FFFF, 即 Unicode 所有的字符編碼空間.
• 另 ASCII 字符以\x+16 進制編碼值表示.
  16 進制編碼值長度固定為 2 碼.

例一:

console.log('台灣')              // 直接用 Unicode
console.log('\u53F0\u7063')      // 使用 Unicode 編碼值轉譯
console.log('\u{53F0}\u{7063}')  // 使用 ES6 Unicode 編碼值轉譯格式.

例二: 輔助平面字符, Surrogate Pair 格式

console.log('𨄗')            // 直接用 Unicode
console.log('\uD860\uDD17')  // 使用 Unicode 編碼值轉譯
console.log('\u{28117}')     // 使用 ES6 Unicode 編碼值轉譯格式.

切換到 Emoji 字型

Unicode 部份字元有多種變體字型, 例如: "▶" (U+25B6) 和 '◀' (U+25C0), 有 VS15 (text) 和 VS16 (emoji) 二種變種字型.

一般 PC Windows 會用 VS15 字型 (也有些字元連 PC Windows 也是預設用 VS16). 但不同系統的預設值也有些微不同, 例如: Apple iPhone, iPad 的預設值 VS16 (emoji). 如果你需要強制使用 VS15 或者 VS16 字型則需要在該字元後面加上 (U+FE0E) 或 (U+FE0F).

例如: 在 CSS 的 content 內容中, "◀" (U+25C0)
要強制使用 VS15(text), 應輸入"◀&bsol;FE0E" 或者 "&bsol;25C0&bsol;FE0E".
強制使用 VS16(emoji), 則應輸入"◀&bsol;FE0F" 或者 "&bsol;25C0&bsol;FE0F".

又如: 在 HTML 頁面中, "▶" (U+25B6)
強制使用 VS16(emoji), 應輸入▶&#xFE0F; 或者 &#x25B6&#xFE0F;. 完成效果: ▶️
強制使用 VS15(text), 則應輸入▶&#xFE0E; 或者 &#x25B6&#xFE0F;. 完成效果: ▶︎

還有, 由網頁頁面裡拷貝後附 VS15 或 VS16 的字元, 貼上時也會有 &#xFE0E; 或 &#xFE0F; 附在字元後面. 必要時可以使用文字編輯器 UltraEdit 切換成 Hex 模式來檢查. 也可以在 powershell 視窗裡輸入:

Format-Hex file_to_check

用不慣 powershell 的人可以在 cmd 視窗裡輸入 (Windows XP 及以上):

CertUtil file_to_check

注意: 網頁使用的字型 (css:font-family) 會影響到顯示結果. 例如: 本頁面預設是用 "Microsoft JhengHei" (微軟正黑體) 字型, 如果你用 PC Windows 你會看不到下表的前 4 個的 emoji 字型, 換成任一個英文字型就可以顯示出前 4 個的 emoji 字型. 使用 iPhone 或者 iPad 則不會有這個現象.

參考文件

• 維基百科:
  • 中文頁面: 變體選擇符 (Unicode 區段)
  • 英文頁面: Variation Selectors (Unicode block)
• Stackoverflow: How do I stop iOS from converting a small pointing right triangle character into a rectangluar boxed triangle symbol?