twitter / twemoji Goto Github PK

It seems that it is written by js or css.Can I use it in my android application ?

Disclaimer: I volunteer for jsDelivr CDN.
What is jsDelivr? Basically MaxCDN + CloudFlare (what CDNJS uses) + extra POPs load-balanced by cedexis. MaxCDN by itself is solid & fast, but the extra POPs are handy for some users, especially with CloudFlare expanding into China, Russia, Middle-East, & Africa.

Let us know if you have questions please.

Not sure how precise QA you require, but just curious if you XOR or use various tools to test difference in format translation?

While svg.sh exists for generating SVGs, there doesn't seem to be an equivalent png.sh for generating the PNGs.

Would someone mind adding this to the repo, please? :-)

Add an option to customize the HTML class of the emoji img element.

http://twitter.github.io/twemoji/preview.html shows two chinese flags in it, looks like the second one should be a "D".

I don't have time for this

Hello,

the "face with open mouth and cold sweat" Twemoji:

has a teardrop instead of a drop of sweat.

Could you please reposition the drop, so that the face no longer looks like as if it would be crying and instead looks like as if it is sweating?

Regards

https://github.com/twitter/twemoji/blob/gh-pages/README.md#attribution-requirements says:
However, we consider the guide a bit onerous and as a project, a mention in a project README or an 'About' section or footer on a website.

Is that sentence supposed to have a verb? : - )

How come 😢 becomes

See https://twitter.com/dkhamsing/status/563073256480342017

Embed

@drbarnard 😢

— Daniel (@dkhamsing) February 4, 2015

Do you plan to provide a font?

Hello,

the Twitter blog says:

https://blog.twitter.com/2014/open-sourcing-twitter-emoji-for-everyone says:

Twemoji is compliant with the latest 7.0 Unicode version

But apparently it's not.

There seem to be some new Emojis in Unicode 7.0, see:

http://emojipedia.org/new-emoji/

Just to name one example, there is the "slightly smiling face" among them for example:

http://emojipedia.org/slightly-smiling-face/

And it's missing from Twemoji.

Again, that's just one example.

Could you please add the missing Emojis to the Twitter "Twemoj" Emoji set?

It would be much appreciated.

Regards

i want to use in blogspot blog can you tell me how can i do this ?
http://t.co/Qmx3f3ObFR

Compare:
http://www.unicode.org/cgi-bin/varglyph?24-263A-FE0F
https://github.com/twitter/twemoji/blob/v1.3.2/svg/263a.svg

Is there any way of me adding Twemoji to sites like my Tumblr blog?

I'm wondering this, because if I use emojis on my blogposts, they appear as white boxes, rather than emojis. I was unsure on whether there was a way of implementing Twemoji onto sites like Tumblr, so that this doesn't happen.

If so, what do I need to put into my code and where?

Thanks.

Is there any easy way to make an emoji palette using these images? My Googling skills apparently failed.

I just noticed than assets/1F567.ai was the same than 1F566.ai (so the svg file too), when it should be the same than 1F567.png. I'm a new Git user so I prefer not to fix it myself, for fear of mishandling 😉

Even the size you use in your examples, https://abs.twimg.com/emoji/v1/36x36/2764.png, yields a broken image. However, https://abs.twimg.com/emoji/v1/72x72/2764.png works perfectly fine.

Hi! I created a CSS library called Twemoji Awesome, which lets you use Twemoji using CSS classes. The idea came from Font Awesome, and it uses Emoji Cheat Sheet for class names. I got a reply from Twitter OSS account and thought that maybe you can add a link to http://ellekasai.github.io/twemoji-awesome/ somewhere on http://twitter.github.io/twemoji/ ?

I cannot unsee that the thumbsup looks like a turkey.

If you are accepting pull requests, I will submit one.

Thanks for sharing the emoji!

The PNG files are generally well optimized and they're not full of metadata bloat. However, the compression isn't universally perfect. You can losslessly use Google's Zopfli deflater to recompress the IDAT streams in the files to save between 0.4% and 1.1% of the data size (the 16x16 icons yield the best savings %).

I wrote a tool that does this (PNGDistill, ships with Fiddler) but I'm sure there are many others.

Unfortunately, when using DOM parsing right now, this attempts to replace emoji characters with image tags inside of a textarea tag. It would be nice if I could just adjust the shouldntBeParsed regex to exclude textareas.

Hello,

the "crying face" Twemoji:

has two teardrops.

The second teardrop of the "crying face" Twemoji covers the mouth of the Twemoji so much, that it's almost impossible to see the sadness of the mouth.

The mouth is hidden behind the two teardrops.

So, could you please remove one of the teardrops so that the "crying face" Twemoji only has one teardrop?

Most other popular Emoji sets only use one teardrop for the "crying face" Emoji.

So, could you please do it as well?

Regards

We all ❤️ sprites. Sprites are fast. 🌠
I don't want to have to generate my own sprite for emojis when I build my JS app. I don't want to have to host my own sprite on my possibly-non-CDNed site.
Would it be out of scope of the project to provide a sprite (and accompanying stylesheet) for the emoji icons?

@jasmussen & @WebReflection :

The new "grinning face with smiling eyes" SVG Twemoji (the updated version by @jasmussen) apparently has an issue with his teeth, see:

https://github.com/twitter/twemoji/blob/gh-pages/svg/1f601.svg

As you can see, there are now some "gaps" between the teeth and the mouth.

This is issue is not present on the very similar looking "grimacing face" SVG Twemoji, see:

https://github.com/twitter/twemoji/blob/gh-pages/svg/1f62c.svg

Tested with Mozilla Firefox 37.0.1 and initially noticed on the following page:

http://twitter.github.io/twemoji/preview-svg.html

Regards

Adding hashtag for twimoji example for smile emoticon = #smile and others emoticon.

See http://unicode.org/charts/PDF/U1F600.pdf.

@WebReflection & @jasmussen :

The "face savouring delicious food" Twemoji::

https://github.com/twitter/twemoji/blob/gh-pages/svg/1f60b.svg

looks like as if it would be winking.

The "savouring delicious food" description does not mention a wink.

And the mouth of the "face savouring delicious food" Twemoji is shorter on the left side than it is on the right side.

The "face savouring delicious food" Apple Emoji for example does not have a wink and it's mouth has the same length on both sides, see:

😋

So, could you please remove the wink from the "face savouring delicious food" Twemoji and widen it's mouth so that it's mouth has the same length on both sides.?

It would be much appreciated.

Regards

Hello,

I just came across a screenshot on the XDA Developers forum, which shows what the Twitter "Twemoji" Emoji set looks like on an Android keyboard, see:

Source:

http://forum.xda-developers.com/showthread.php?p=58610497#post58610497

It looks quite good.

But:

As you can see, the face size is inconsistent across the Twemoji faces, which looks quite buggy.

Some Twemoji faces are bigger, some are smaller.

In comparison, here is a screenshot which shows how the "Emoji One" Emoji set looks on an Android keyboard:

Source:

http://forum.xda-developers.com/showthread.php?p=58610497#post58610497

As you can see, the face size is consistent across the Emoji One faces, which looks much better.

So, could you please change the Twemoji faces so that they all have the same size?

Regards

Error occur at this line:
https://github.com/twitter/twemoji/blob/gh-pages/twemoji.npm.js#L27

I come up with a solution like this, but don't know whether this is appropriate or not:

var protocol;
  try{
    protocol = location.protocol === 'https:' ? 'https:' : 'http:';
  }catch(e){
    protocol = 'http:';
  }
...
var
    twemoji = {
      base: protocol + '//twemoji.maxcdn.com/'
    }

Currently, the alt text of the replaced emoji is the emoji itself. This could be improved to describe the emoji, etc

Example:
https://cloudup.com/cnAYmx7HsEK
contains this HTML
<img class="emoji" draggable="false" alt="👍" src="...

It might be faster to declare a variable (right between shouldntBeParsed and fromCharCode around line 510 in twemoji-generator.js) that contains the data common to all of the emoji images, (it looks like what they have in common is the onerror property and the draggable=false attribute, but apparently cloneNode does not clone event handlers) and then call cloneNode on that variable within the parseNode function, around line 643.

In the end, it would look a bit like this...

/* list of variable declarations */
        // nodes with type 1 which should **not** be parsed
        shouldntBeParsed = /IFRAME|NOFRAMES|NOSCRIPT|SCRIPT|SELECT|STYLE|TEXTAREA/,

        // call the constructor just once, for performance reasons
        emojiImg = new Image(),

        // just a private shortcut
        fromCharCode = String.fromCharCode;

      emojiImg.setAttribute('draggable', 'false');

      return twemoji;

/* more code, now we're inside the while loop in the parseNode function */
              if (src) {
                img = emojiImg.cloneNode();
                img.onerror = twemoji.onerror;
                img.className = options.className;
                img.alt = alt;
                img.src = src;
                modified = true;
                fragment.appendChild(img);
              }
/* on to the end of the file */

I believe this will be faster, at the cost of keeping an extra Image node perpetually in memory.

Would be cool to get SVG versions? I see there's .ai files.

SVG would mean clean emoji across different screens and resolutions without having to serve separate files.

Maybe this would be a bad idea that I haven't thought of? Browser support?

Ignore!

Why are these filtered into icons by default? They aren't emoji and are quite surprising as default behavior.

I move to add them to the ignore list. https://github.com/twitter/twemoji/blob/gh-pages/twemoji-generator.js#L20

I see that the graphics are licensed under a CC-BY 4 license; to whom should the graphics be attributed?
Should a link point to this repo, or somewhere else? Should attribution appear on every page where the graphics might be used, or is including attribution on a more general Contributors page acceptable?

Probably the wrong place to plug, but I built this with it:

https://www.unicodepileofpoo.uk/

Can the maintainers get the word out somewhere/somehow?

💩

Hello,

the Twemojis do not have a faint, narrow contrasting border to keep them visually distinct from a similarly colored background.

The latest Draft Unicode Technical Report 51:

http://www.unicode.org/reports/tr51/

recommends to give Emojis a faint, narrow contrasting border to keep the them visually distinct from a similarly colored background.

Please give the Twemojis a faint, narrow contrasting border to keep them visually distinct from a similarly colored background.

Regards

Based on discussion from #50.

select can only contain option or optgroup tags, optgroup can only contain option tags, and option can only contain text.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

With Apple announcing imminent support for Unicode 8.0 emoji, it seems like we'll need support for it sooner than when the Unicode 8.0 spec is due to be finalised.

Do you folks have any plans for implementing this, or how to tackle the various parts of it? Are there places where the wider community can assist?

209 new flags are added to Unicode as a new emoji. And Android Lollipop supports them.
Why don't you support them?

For reference: http://blog.emojipedia.org/209-new-emoji-flags-available-today

It would be nice if there were a parameter to control whether the Twemoji node-parser first determines the text size of the element to add the emoji to, instead of picking just one size that may be much too large or much too small; I tried making the images text-size-dependent without hacking Twemoji itself, but every time I tried, the browser kept loading the images serially.

My idea is to call the parameter options.sizing and then, in parseNode, if options.sizing warrants it, check the text size of each text node's parent and set options.size to a suitable value (my idea is '16x16' if text size is less than 36 pixels or not found, '36x36' if text size is at least 36 but less than 72 pixels, and '72x72' otherwise) before executing the callback function.

Maybe the size thresholds could be lowered a bit, but I'm afraid of breaking layouts by making these inline images much larger than the text; if I weren't, my idea would be based on geometric means: '36x36' if text size is between 24 and 50.91 pixels inclusive, '16x16' if below, '72x72' if above. (Maybe arithmetic means: 26 and 54? Maybe I should figure out how to specifically get the height of the capital letters and test that against the thresholds?)

In my experiments, I've set options.sizing to specify this text-dependent emoji sizing by default, but maybe you don't want to change the semantics of Twemoji for existing users; the reason I'm not sending in a pull request yet is that I don't know whether the new semantics would be such an improvement that they ought to be pushed out to users who don't opt out.

I am using the following helper function to find the text size ('fontSize' specifically) of each text node's parent node, a cross-browser alternative to getComputedStyle:

  function getStyle(el, cssprop) {
    if (document.defaultView && document.defaultView.getComputedStyle)
      return document.defaultView.getComputedStyle(el, '')[cssprop]; // W3C
    if (el.currentStyle) return el.currentStyle[cssprop]; // IE8 and earlier
    return el.style[cssprop]; // try to get inline style
  }

Enterprise coders have feels too. Come on.

Re:

Are you familiar with the emoji-regex project? It’s an auto-generated regular expression based on the data from Unicode Technical Report #51, which is more up to date than the EmojiSources.txt source that is currently being used. The repository also contains the script that generates the regular expression, so it can easily be updated whenever UTR51 is updated. You could use a modified version of that script for this project – one that filters out the emoji for which no graphics are available yet, before generating the regex.

In Fx35, if I visit the SVG demo via your webserver, I get only the B&W (I assume internal) versions. Visiting your demo locally works just fine, as does in Chrome Beta.

tested on both IE9 Mobile for WP7 which surprisingly supports SVGs as img.src and WP 8.1 with IE11, all inkscape exported SVGs do not scale accordingly with the outer image as every other browser do.

Investigating if it's a matter of automation process via Inkscape, where apparently there's no way to specify exported size for non PNGs, or I should file a bug to IE team about this.

Received an error from a user running IE9 that is reporting the following bug

Last test will resize in Fx & Chrome, but not IE10: http://codepen.io/tomByrer/pen/ZYELXG/?editors=110
You can comment out the "target IE" CSS block; makes no difference.
(Though you may not want to provide a fix or workaround, though it would be prudent to document.)

Hi,

currently only country flags are supported by Twitter. I mean only ISO 3166 registrered codes are supported using Unicode Regional Indicator Symbols (RIS). There are very active online communities without an own independent country and some support for their flags should be done.

For example, you can take Welsh, Scottish and Catalan communities. These 3 communities are very active and they achieve an own TLD (.cymru, .scot and .cat). Other communites, like Basque and Gallician have own TLD too (.eus and .gal).

As a remark, some "ISO 3166 country" flags collection, like famfam [1] add few "extra" flags for these communities.

I think flags for these communities should be supported by Twitter. An easy way is extending Unicode Regional Indicators Symbols. For instance, if a cultural/language TLD is typed with Unicode RIS, then show the flag for these culture/language:

🇸🇨🇴🇹 --> it shows Scottish flag
🇨🇾🇲🇷🇺 --> it shows a Welsh flag
🇧🇿🇭 --> it shows a Breton flag
🇨🇦🇹 --> it shows Catalan flag
🇪🇺🇸 --> it shows a Basque flag
🇬🇦🇱 --> it shows a Gallician flag

Thanks,

[1] http://www.famfamfam.com/archive/flag-icons-released/