mirror of
https://github.com/LCTT/TranslateProject.git
synced 2025-02-03 23:40:14 +08:00
Merge pull request #2382 from FSSlc/master
[ Translated ] 20141114 How To Use Emoji Anywhere With Twitter's Open Source Library.md
This commit is contained in:
Xingyu.Wang
commit
f931b90375
@ -1,93 +0,0 @@
|
||||
Translating by FSSlc
|
||||
|
||||
How To Use Emoji Anywhere With Twitter's Open Source Library
|
||||
================================================================================
|
||||
> Embed them in webpages and other projects via GitHub.
|
||||
|
||||
|
||||
|
||||
Emoji, tiny characters from Japan that convey emotions through images, have already conquered the world of cellphone text messaging.
|
||||
|
||||
Now, you can post them everywhere else in the virtual world, too. Twitter has just [open-sourced][1] its emoji library so you can use them for your own websites, apps, and projects.
|
||||
|
||||
This will require a little bit of heavy lifting. Unicode has recognized and even standardized the emoji alphabet, but emoji still [aren’t fully compliant with all Web browsers][2], meaning they'll show up as “tofu,” or blank boxes, most of the time. When Twitter wanted to make emoji available, the social network teamed up with a company called [Icon Factory][3] to render browser imitations of the text message symbols. As a result, Twitter says there’s been lots of demand for access to its emoji.
|
||||
|
||||
Now, you can clone Twitter’s entire library on [GitHub][4] to use in your development projects. Here’s how to do that, and how to make emoji easier to use after you do.
|
||||
|
||||
### Obtain Unicode Support For Emoji ###
|
||||
|
||||
Unicode is an international encoding standard that assigns a string of characters to any symbol, letter, or digit people want to use online. In other words, it’s the missing link between how you read text on a computer, and how the computer reads text. For example, while you are looking at an empty space between these words, the computer sees “&mbsp.”
|
||||
|
||||
Unicode even has its own [primitive emoji][5] that can be read in the browser without any effort on your part. For example while you see a ♥, your computer is decoding the string “2665.”
|
||||
|
||||
To use Twitter’s emoji library in most cases, you simply need to add a script inside the <head> section of your HTML page:
|
||||
|
||||
<script src="//twemoji.maxcdn.com/twemoji.min.js"></script>
|
||||
|
||||
This grants your project access to the JavaScript library that contains the hundreds of emoji that work on Twitter. However, creating a document with simply this script isn’t going to make emoji appear on your site. You also need to actually insert some emoji!
|
||||
|
||||
In the <body> section, paste a few of the emoji strings you can find in Twitter’s [preview.html source code][6]. I used 🎹 and 🏁 without really knowing how they'd appear in the browser window. Yeah, you’ll have to just paste and guess. You can already see the problem we're going to fix in section two.
|
||||
|
||||
However, through some trial and error, you can turn a raw HTML file that looks like this—
|
||||
|
||||
|
||||
|
||||
—into a webpage that looks something like this:
|
||||
|
||||
|
||||
|
||||
### Convert Emoji Into Readable Language ###
|
||||
|
||||
Twitter’s solution is all well and good for making a site or app emoji compliant. But if you want to be able to easily insert your favorite emoji at will via HTML, you’re going to need an easier solution than memorizing all those Unicode strings.
|
||||
|
||||
That’s where programmer Elle Kasai’s [Twemoji Awesome][7] styles come in.
|
||||
|
||||
By adding Elle’s open-source stylesheet to any webpage, you can use English words to understand which emoji you’re inserting. So if you want a heart emoji to show up, you can simply type this :
|
||||
|
||||
<i class="twa twa-heart"></i>
|
||||
|
||||
In order to do this, let’s download Elle’s project with the “Download ZIP” button on GitHub.
|
||||
|
||||
Next, let’s make a new folder on the desktop. Inside this folder, we’ll put emoji.html—the raw HTML file I showed you before, and also Elle’s [twemoji-awesome.css][8].
|
||||
|
||||
We’ll need the HTML file to acknowledge the CSS file, so in the <head> section of the html page you’ll want to add a link from the css file:
|
||||
|
||||
<link rel="stylesheet" href="twemoji-awesome.css">
|
||||
|
||||
Once you put this in, you can delete Twitter's script from before. Elle's styles each link to the Unicode string for the relevant emoji, so you no longer have to.
|
||||
|
||||
Now, go down to the body section and add a few emoji. I used <i class="twa twa-sparkling-heart"></i>, <i class="twa twa-exclamation"></i>, <i class="twa twa-lg twa-sparkles"></i> and <i class="twa twa-beer"></i>.
|
||||
|
||||
You'll end up with something like this:
|
||||
|
||||
|
||||
|
||||
Save and view your creation in the browser:
|
||||
|
||||
|
||||
|
||||
Ta-da! Not only have you gotten a basic webpage to support emoji in the browser, you’ve also made it easy to do. Feel free to check out this tutorial on [my GitHub][9] for actual files you can clone instead of screenshots.
|
||||
|
||||
Lead image via [Get Emoji][10]; screenshots by Lauren Orsini
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: http://readwrite.com/2014/11/12/how-to-use-emoji-in-the-browser-window
|
||||
|
||||
作者：[Lauren Orsini][a]
|
||||
译者：[译者ID](https://github.com/译者ID)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创翻译，[Linux中国](http://linux.cn/) 荣誉推出
|
||||
|
||||
[a]:http://readwrite.com/author/lauren-orsini
|
||||
[1]:https://blog.twitter.com/2014/open-sourcing-twitter-emoji-for-everyone
|
||||
[2]:http://www.unicode.org/reports/tr51/full-emoji-list.html
|
||||
[3]:https://twitter.com/iconfactory
|
||||
[4]:https://github.com/twitter/twemoji
|
||||
[5]:http://www.unicode.org/reports/tr51/full-emoji-list.html
|
||||
[6]:https://github.com/twitter/twemoji/blob/gh-pages/preview.html
|
||||
[7]:http://ellekasai.github.io/twemoji-awesome/
|
||||
[8]:https://github.com/ellekasai/twemoji-awesome/blob/gh-pages/twemoji-awesome.css
|
||||
[9]:https://github.com/laurenorsini/Emoji-Everywhere
|
||||
[10]:http://getemoji.com/
|
||||
@ -0,0 +1,91 @@
|
||||
怎样通过 Twitter 的开源库来随处使用 Emoji 表情符号
|
||||
================================================================================
|
||||
> 通过 GitHub 将它们嵌入到网页和其他项目中。
|
||||
|
||||
|
||||
|
||||
Emoji, 来自日本的小巧符号，通过图像表达感情，已经征服了手机文字信息的世界。
|
||||
|
||||
现在，你可以在虚拟世界中随处使用它们了。 Twitter 最近[开源了][1]他们的 emoji 符号库，使得你可以在你自己的网站，应用，和项目中使用它们。
|
||||
|
||||
但这需要一点体力活。 Unicode 已经识别甚至标准化了 emoji 字母表， 然而 emoji 仍然[不能完全与所有的网络浏览器相兼容][2],这意味着大多数情况下，它们将呈现为 “豆腐块”或 空白盒子。当 Twitter 想使得 emoji 可用时，社交网络联合一家名为[Icon Factory][3]的公司共同渲染浏览器以模仿 文本信息符号的效果。结果，Twiter 说道 人们对他们的 emoji 库有很大的需求。
|
||||
|
||||
现在， 你可以从 [GitHub][4] 上克隆 Twitter 的整个库，从而在你的开发项目中使用它们。 下面将为你介绍如何达到上面的目的以及如何使得 emoji 更容易被使用。
|
||||
|
||||
### 为 Emoji 得到 Unicode 支持 ###
|
||||
|
||||
Unicode 是国际编码标准，它为任意的符号，字母或人们想在网络上使用的数字配置了一串符号。换句话说，它是 你如何在计算机上阅读文本 与 计算机如何读取文本 之间的缺失环节。例如，对于你正看到的位于这些句子中的`空白`，计算机读取为 “&mbsp”。
|
||||
|
||||
Unicode 甚至拥有其自己的 [原始 emoji][5]，它们可以 在没有你的任何努力的情况下在浏览器中被阅读。例如，当你看到了 一个 ❤ 符号，你的计算机正在解码字符串 “2665” 。
|
||||
|
||||
要在大多数情况下使用 Twitter 的 emoji 库，你只需在你的 HTML 网页中的 `<head>`块中添加如下脚本：
|
||||
|
||||
<script src="//twemoji.maxcdn.com/twemoji.min.js"></script>
|
||||
|
||||
这样就使得你的项目可以访问 包含有已经在 Twitter 中可使用的数以百计的 Emoji 符号的 JavaScript 库。然而，创建一个仅仅包含这个脚本的文档并不能使得在你的网站中呈现出 emoji 符号，实际上，你仍需要嵌入一些 emoji 符号！
|
||||
|
||||
在 `<body>`块中，粘贴一些可以在 Twitter 的[preview.html 文件源代码][6] 中找到的 emoji 字符串。我使用了 🎹 和 🏁，当然我并不知道在浏览器窗口中它们的样子。是的，你必须粘贴并猜测它们。你已经看出了问题，我们将在 第二小节中予以解决。
|
||||
|
||||
无论如何，通过一些尝试，你可以将一个如下图的原始 HTML 文件---
|
||||
|
||||
|
||||
|
||||
---转变成如下图的网页：
|
||||
|
||||
|
||||
|
||||
### 将 Emoji 转换为可阅读的语言 ###
|
||||
|
||||
对于一个网站或应用，Twitter 的解决方案是非常适用的。但如果你想通过 HTML 轻易地插入你喜爱的 emoji 符号，你需要一个更易实现的解决方案，而不是记住所有代表 emoji 的 Unicode 字符串。
|
||||
|
||||
那正是程序员 Elle Kasai 的 [Twemoji Awesome][7] 样式大展身手的地方。
|
||||
|
||||
通过向任意网页中添加 Elle 的开源样式表，你可以适用 英语单词来理解你正插入的 emoji 符号的意义。所以如若你想展示一个 心形 emoji 符号，你可以简单地输入：
|
||||
|
||||
<i class="twa twa-heart"></i>
|
||||
|
||||
为了实现上面的目的，让我们下载 Elle 的项目，通过点击在 GitHub 上 “Download ZIP” 按钮。
|
||||
|
||||
接着，我们在桌面上新建一个文件夹，然后进入该文件夹，并将 emoji.html---我先前向你展示的 HTML 源文件--- 和 Elle 的 [twemoji-awesome.css][8] 一同放进去。
|
||||
|
||||
我们还需要 HTML 文件识别这个 CSS 文件，所以在 html 网页中的 `<head>` 块中，为 CSS 文件添加一个链接：
|
||||
|
||||
<link rel="stylesheet" href="twemoji-awesome.css">
|
||||
|
||||
一旦你将上面的代码添加了进去，你便可以删除先前添加的 Twitter 的脚本链接。
|
||||
|
||||
现在，找到 `body` 块部分的代码，然后添加一些 emoji 符号。我使用了 `<i class="twa twa-sparkling-heart"></i>`, `<i class="twa twa-exclamation"></i>`, `<i class="twa twa-lg twa-sparkles"></i>` 和 `<i class="twa twa-beer"></i>`。
|
||||
|
||||
最终，你将得到如下的代码：
|
||||
|
||||
|
||||
|
||||
保存并在浏览器中查看上面的文件：
|
||||
|
||||
|
||||
|
||||
当当！这样你不仅得到了一个可以在浏览器中支持 emoji 符号的基本网页，而且还知道了如何简单地实现它。你可以随意的在[我的 GitHub][9] 中查看这个教程，并且可以克隆这些实际的文件而不只是看看这些截图。
|
||||
|
||||
来自于[得到 Emoji][10]的引导图像； Lauren Orsini 截图。
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: http://readwrite.com/2014/11/12/how-to-use-emoji-in-the-browser-window
|
||||
|
||||
作者：[Lauren Orsini][a]
|
||||
译者：[FSSlc](https://github.com/FSSlc)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创翻译，[Linux中国](http://linux.cn/) 荣誉推出
|
||||
|
||||
[a]:http://readwrite.com/author/lauren-orsini
|
||||
[1]:https://blog.twitter.com/2014/open-sourcing-twitter-emoji-for-everyone
|
||||
[2]:http://www.unicode.org/reports/tr51/full-emoji-list.html
|
||||
[3]:https://twitter.com/iconfactory
|
||||
[4]:https://github.com/twitter/twemoji
|
||||
[5]:http://www.unicode.org/reports/tr51/full-emoji-list.html
|
||||
[6]:https://github.com/twitter/twemoji/blob/gh-pages/preview.html
|
||||
[7]:http://ellekasai.github.io/twemoji-awesome/
|
||||
[8]:https://github.com/ellekasai/twemoji-awesome/blob/gh-pages/twemoji-awesome.css
|
||||
[9]:https://github.com/laurenorsini/Emoji-Everywhere
|
||||
[10]:http://getemoji.com/
|
||||
Loading…
Reference in New Issue
Block a user