emoji探寻之路

emoji是什么?

http://www.baike.com/wiki/emoji

emoji表情符号,是20世纪90年代由NTT Docomo栗田穣崇(Shigetaka Kurit)创建的,词义来自日语(えもじ,e-moji,moji在日语中的含义是字符)。

emoji可以使数字通信做到让人如同面对面交流,避免错误传达信息。

自苹果公司发布的iOS 5输入法中加入了emoji后,这种表情符号开始席卷全球,目前emoji已被大多数现代计算机系统所兼容的Unicode编码采纳。

手机操作系统iOS,Android,WindowsPhone;

电脑:Windows,Mac OS X均内设Emoji表情

QQ等聊天工具中也添加了emoji表情供用户使用

Windows(仅支持Windows 8、Windows 8.1、Windows 10、Windows RT)

任务栏右键-工具栏-屏幕键盘,然后任务栏上会出现一个白色键盘,单击打开后,在屏幕键盘的左下角按一个笑脸的标志就出现大量Emoji表情,里面也包含颜表情。

各种emoji 的表情符号:

http://coocy.github.io/emoji/

字符集之乱战

http://wpceo.com/supporting-emoji-on-php-mysql/

说起 Emoji 的历史说开去那可谓是源远流长了,这里简要介绍 Emoji 在 iOS 系统中的变迁史。

不知道何时起,日本人喜欢发 Emoji 表情图标,于是日本的运营商 DoCoMo、KDDI、SoftBank 推出了自己的 Emoji 字符集。

在这些字符集中,一个 Emoji 表情的实际上是一个 UTF8 字符,这点不同于 QQ 或者微信的表情,

用户发短信的时候一个 Emoji “图像”只占用了一个字符,那是相当的方便。

苹果的 iOS 和 Mac OS X 系统内置了 Apple Color Emoji(Apple 彩色表情符号)的字体用来显示 Emoji 表情,

iOS 里有一个 Emoji 输入键盘,可以输入各种 Emoji 表情图标,

在 Mac OS X 里使用 Option + Command + T 调出输入键盘里选择“表情符号”输入,

Mac OS X 里的字体文件位于 /System/Library/Fonts/Apple Color Emoji.ttf。

从技术上说,单个 Emoji 表情实际上是使用 UTF8 编码的一个字符,苹果在 iOS4 开始支持了 Emoji 的显示,

当时用的是 SoftBank 的方案。在日本的三家运营商之间,用来表示同一个表情的 UTF8 码并不相同(见对比列表),

们之间要做一个转换才能正确显示。以相同一个表情笑脸为例,SoftBank 表示为 U+E04A,KDDI 则表示为 U+E488。

https://en.wikipedia.org/wiki/Emoji

From 2010 onwards, some emoji character sets have been incorporated into Unicode,

a standard system for indexing characters,

which has allowed them to be used outside Japan and to be standardized across different operating systems.

幸而 2010 年, emoji表情字符编码 unicode组织统一。

从 iOS5 开始,苹果开始支持标准的 Unified 编码的 Emoji 表情。

苹果在 iOS6 和 Mac OS X 10.8 中又增加了 300 多个 Emoji 表情,而 SoftBank 编码因为渐渐被历史淘汰,已经没有了相应的升级。

现在(2016-5-17)IOS已经发展到IS09,旧的设备可以升级到新系统。

三种字符集与unicode之间的对应表:

http://www.unicode.org/Public/UNIDATA/EmojiSources.txt

三种字符集与unicode之间转换的PHP工具:

https://github.com/iamcal/php-emoji

emoji的unicode编码和UTF8存储码之间的关系:

http://punchdrunker.github.io/iOSEmoji/table_html/index.html

WEB应用考虑

因为PC的输入法中不支持emoji,或者系统不支持。 如果在WEB上应用,需要有一些考虑:

分析:

1、 emoji作为unicode字符集一部分,应该是操作系统支持的范围(系统支持,输入法支持,例如现有手机android系统,win8之后系统也支持),

但是考虑到web页面的平台兼容性, 把 Emoji 输入和显示最好需要通过图片化方式。

所以,需要选择前端emoji插件库。

2、 由于历史原因,日本的运营商 DoCoMo、KDDI、SoftBank 推出了自己的 Emoji 字符集,老的iphone手机(IOS6之前)使用SoftBank编码,

导致可能出现设备之间配置的emoji出现乱码现象,但是考虑unicode编码格式已经成为规范有时(6年),

现有系统均已此为实现依据,所以规定应用仅仅 emoji 字符 为 unicode 码足矣。

不兼容旧系统的无线设备的 emoji显示。

3、 页面输入,规定 只使用WEB界面上的前端插件提供标准的 emoji 输入方式。

类似手机之类自带的 emoji 输入法,不允许输入。以免2中描述的 设备兼容性问题。

前端emoji库调查

emojify.js

http://hassankhan.me/emojify.js/

A Javascript module to convert Emoji keywords to images

只能将 emoji关键字(例如 :smile:) 转换成笑脸图标,不提供输入。 基于图片方案,图片大小3.8M。

js-emoji

https://github.com/iamcal/js-emoji

A JS Emoji conversion library

js-emoji - Display emoji in the browser, everywhere

同上, 不提供输入。 不直接维护图片,引用的图片在另外一个项目。 图片大小为 3.4M.

https://github.com/github/gemoji/tree/master/images/emoji/unicode

one-signal/emoji-picker

https://github.com/one-signal/emoji-picker

Add a slick emoji selector to input fields and textareas on your website.

提供输入,不提供图片显示。依赖图片, 图片大小为 3.2M.

IE8不支持。

jquery-emoji-picker-master

https://github.com/wedgies/jquery-emoji-picker

A jQuery picker for emojis

提供输入,输入的工具实现不使用图片,显示以系统支持为准。 优点体积小。

我测试: IE8不支持。

方案推荐

方案1:如果完美支持图片输入和显示 emoji,

需要引用两个 emoji js库图片大小翻倍。

优点: 更加形象化。

缺点: 图片大小8M, 且两个库(显示和配置库)图片风格不一致。

且配置页面 对于配置项不提供回显。(one-signal/emoji-picker)

方案2: 只提供输入功能, 选择不依赖图片实现的jquery-emoji-picker-master。

emoji显示依赖系统支持情况。

优点: 整个库比较小。

缺点: 输入框中的显示, 和 状态页面中的显示, 需要依赖系统字符显示。

考虑到 emoji属于新生事物,需要新系统支持,

类似android, win7上效果部分支持,win8已经全面支持,IOS6以上。

考虑到flash占用, 以及两套库的融合和维护成本,不推荐1, 并且考虑 emoji向前兼容性(新系统) , 推荐 方案2.

关于校验的考虑:

emoji unicode字符,占用的byte不定, 页面可以放开长度校验,让后台实现。 或者研究是否能够实现js的byte校验。

jquery-emoji-picker效果

win8 + firefox

win8+IE

data-URI

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/data_URIs

已经支持data:协议的浏览器有Opera 7.20及其以上版本,Safari 和 Konqueror. Internet Explorer 7 及以下版本不支持, Internet Explorer 8 及以上版本只支持在css文件中使用data URIs格式的图片.

http://www.cnblogs.com/hustskyking/p/data-uri.html

由于出现时间较早,目前主流的浏览器基本都支持 data URI:

  • Firefox 2+

  • Opera 7.2+
  • Chrome (所有版本)
  • Safari (所有版本)
  • Internet Explorer 8+

但是部分浏览器对 data URI 的使用存在限制:

http://caniuse.mojijs.com/Home/Html/item/key/datauri/index.html

时间: 2024-11-10 01:10:17

emoji探寻之路的相关文章

Android APK瘦身方法小结

众所周知,APP包体的大小,会影响推广的难度,用户不太喜欢下载太大的APP,同类型同等功能的APP中往往是包体小的更受用户的青睐,所以降低包体是一项非常必要的事情,也是最近公司的APP需要降低包体,所以总结下自己知道的降低包体的方法. 一. 压缩图片 基本每个APP都需要用到相当多的图片,而这些图片在包体中了占据了不少的空间,特别是有些图片大小到达上百k的,加几张就吃不消,所以要对图片进行一定程度的压缩,这里推荐一个网站 --- TinyPng,TinyPNG 是一个图片压缩网站,在上面压过的图

前端性能分析

前端性能分析 最近在读一本经典书<高性能网站建设进阶指南>. 虽然书籍很多年前就出版了,但里面的内容还是耐人寻味,这次就好好的实践了一下. 纸上得来终觉浅,绝知此事要躬行,实践中将会发现一些问题. 有个官方网址<Even Faster Web Sites>,点击“Run the Examples”按钮,就能进入在线demo. 在Github上面有个叫awesome-wpo的项目,里面记录了各个方面关于性能的资源,有书籍.文章.工具等. 下面所有的实验都是在Chrome 49浏览器中

【转】哦,mysql 的其它发行版本Percona, mariadb

原文:http://geek.csdn.net/news/detail/130146 2016年11月25日,沃趣科技"智慧应用 数据先行"2016产品发布会暨新三板挂牌庆祝会在杭州华美达酒店隆重举行,近百位知名企业专家.合作伙伴及媒体人共同出席本次会议,分享数据库相关领域的创新成果和成功经验,一同探讨数据库云化的摸索探寻之路. 借此契机,CSDN记者有幸邀请到沃趣科技联合创始人.高级数据库专家李春,围绕一些大家关心的话题进行采访.纵观MySQL的前世今生,漫谈MySQL十年长路,剖析

Android Webp 完全解析 快来缩小apk的大小吧

本文在我的微信公众号:鸿洋(hongyangAndroid)首发. 转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/53240600: 本文出自:[张鸿洋的博客] 一.概述 最近项目准备尝试使用webp来缩小包的体积,于是抽空对相关知识进行了调研和学习. 至于什么是webp,使用webp有什么好处我就不赘述了,具体可以参考腾讯isux上的这篇文章WebP 探寻之路,大致了解下就ok了. 入手大致需要考虑以下几个问题: 如何将现

39、apk瘦身(转载)

本文转自::Android开发中文站 » 关于APK瘦身值得分享的一些经验 从APK的文件结构说起 APK在安装和更新之前都需要经过网络将其下载到手机,如果APK越大消耗的流量就会越多,特别是对于使用移动网络的用户来讲,消耗流量越多就代表需要花更多的钱去购买流量.同时一些第三方应用商城也会对上传的APK大小有限制,所以为了能够让产品能够更受商城和用户欢迎,APK瘦身是第一步,更小的APK标示着更多地用户愿意去下载和体验. 为了能够减小APK的大小,首先需要知道APK由哪些部分构成,然后针对每个部

web前端优化的套路

摘要: http://12652791.blog.51cto.com/12642791/1947541 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识. 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性能和交互对用户的影响是最直接的,推广拉新是一门艺术,用户的留存是一门技术,拉进来留住用户,产品体验很关键,这里我以美柚的页面为例子,用实例展开说明前端优化的基本套路(适合新手上车). WEB性能优化套路 基础套路1:减少资

关于APK瘦身值得分享的一些经验

从APK的文件结构说起 ??APK在安装和更新之前都需要经过网络将其下载到手机,如果APK越大消耗的流量就会越多,特别是对于使用移动网络的用户来讲,消耗流量越多就代表需要花更多的钱去购买流量.同时一些第三方应用商城也会对上传的APK大小有限制,所以为了能够让产品能够更受商城和用户欢迎,APK瘦身是第一步,更小的APK标示着更多地用户愿意去下载和体验. ??为了能够减小APK的大小,首先需要知道APK由哪些部分构成,然后针对每个部分做相应的优化工作,下图是一个APK解压后的文件结构: ??各文件的

大话WEB前端性能优化基本套路

前言 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识. 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性能和交互对用户的影响是最直接的,推广拉新是一门艺术,用户的留存是一门技术,拉进来留住用户,产品体验很关键,这里我以美柚的页面为例子,用实例展开说明前端优化的基本套路(适合新手上车). WEB性能优化套路 基础套路1:减少资源体积 css 压缩 响应头GZIP js 压缩 响应头GZIP html 输出压缩 响应头GZI

【转】物业管理与移动互联网科技|微信公众平台,物业app,物业O2O

[导语]当下,物业管理行业正在接受新科技浪潮的冲击和洗礼,业界企业纷纷探索物业服务的新发展模式.云服务.微社区.微信公众平台.app等,这些本来陌生的词汇在物业管理行业变得耳熟能详.在借助科技手段拓展多种经营,提升竞争力.增加创富能力.开展信息化建设和管理的同时,部分物业服务企业的发展模式和理念又提升了一大步,现代科技推动物业管理行业发展正在成为现实. 第一部分:移动互联网改变传统物业管理 <ignore_js_op>  从6000斤香梨看社区O2O——记长城物业盛世家园社区香梨团购活动 普而