emoji表情浏览器不兼容怎么办

1,904 阅读4分钟

背景

emoji在各个平台的设备的显示略微有所出入;主要是来源于ios、android、浏览器等对emoji的unicode编码支持不一致。这就导致一个现象:如果一个页面内容的展示来源可以是iphone、android、window等平台,但展示的平台不是对应的内容来源设备,就会导致该emoji表情展示不出来;详情可以查看 Full Emoji List, v14.0

前置知识

ASCII,Unicode 和 UTF-8的关系

你也许知道,计算机只认识0和1;也许也能理解在计算机上的八进制、十进制、十六进制归根结底都是为了简化表达计算机只能理解符号,方便人能更迅速的理解和使用。

例如在计算机认知里的数字: “1010110111000” ;其十进制为 5560;当看到前者,我们需要进行一段转换,将其转换为后者,才能对该数字做到“心中有数”;

上面的例子说的是数字;但是如果是字符呢?其实,字符也是一样的;人们将字符到01的关系做成了一个映射表,从映射表中,我们可以很清楚的找到我们想要表达的字符用01如何表示。

如此,流行通用的第一版映射表ASCII码出现了;由于美国人民使用的字符相对少很多,除去一些特殊字符例如空格换行标点符号,就剩下52个大小写英文字符 ABCDEF……;所以,在ASCII码映射表中,使用8位2进制(256位)来表示字符绰绰有余了。

但是随着计算机在世界的普及,除了美国人,还有中国人、法国人、俄国人等等使用电脑,如此映射表ASCII码远远不能满足世界人民的需要。为了统一一个映射表,一个联盟横空出世: 统一码联盟,其目的是制定一个世界通用的映射表 unicode

有了unicode你以为解决了?不不不,远远没有。

从前ASCII码一共规定了128个字符的编码,每个字符占用的空间是8位2进制;所以用ASCII码表示的字符占用的内存少,可以使用该表进行一一映射。比如 33 === 0010 0001 === !;

但是unicode可以容纳100多万个符号,如果使用这种一一映射的关系,每个符号需要使用的2进制位数是20位(2的20次幂); 对于 !这类字符也要 20位????这种做法太浪费内存了有没有!!

没关系,编码方式闪亮登场!编码方式的目的就是将unicode表示符号进行一层转换,以合理的表达方式存储在电脑的内存中。utf-8这是其一一种编码方式,其目的就是以最小的存储代价将字符表示存储在电脑内存或者硬盘中。具体转换方式可看阮一峰老师的字符编码笔记:ASCII,Unicode 和 UTF-8。在该编码方式下,! 还是使用8位2进制就可以表示了;

unicode 映射可以查看Unicode Character Table;编码表示可以点击进去查看;如下图:

image.png

emoji是什么

由于unicode是一个非常大的字符映射表,而随着时间的递增,该映射表内包含的项也是递增的;所以每个平台对于该映射表的支持也是不一样的。详情可以查看 Full Emoji List, v14.0

我理解emoji就是各个app可以支持的unicode编码,该编码的表示不是字符,而是一个表情。详情可查看emojipedia

兼容方案

参考github上面相关的项目,基本上都是使用图片来代替emoji从而达到兼容的目的。大概的思路为以下几个步骤:

  1. 维护一个映射表,映射表包括emoji的 unicode、utf8编码、对应图片、对应描述
  2. 对html的字符串进行正则匹配(注意:这里匹配是utf8编码,或者其他形式的编码,不是unicode)
  3. 将匹配成功的字符串换成img标签,并且附带映射中的相关信息

兼容方案思路大体为上述,可自由进行扩展,比如不匹配带有class为xxx的标签,不替换为img而是由css类名来表示等等。

github相关项目

资源相关

替换相关