Size difference for Emoji in Chrome

[saracannon]

When "Convert emoticons like :-) and :-P to graphics on display" and is checked, the frowneys are larger than the smileys.

Chrome Version 41.0.2272.89 (64-bit)

[saracannon]

visual screen shot of the emoji patch

[saracannon]

fixes emoji smileys

[saracannon]

patch also fixes #31710

[pento]

Per the discussion on #31710, this patch won't work.

:) translates to simple-smile.png instead of an emoji smile, because emoji doesn't have a closed-mouth smile.

[iseulde]

The image needs to be updated, there's space on all sides while there should be no space at all, like the Twemoji images.
Who has the original?

[pento]

I've attached the original SVG files.

[iseulde]

Where do these come from btw? :) Can the whitespace be trimmed from the originals?

[pento]

@joen made them originally. I think the SVGs are the original, but I'll leave it to him to confirm.

[Joen]

Oh hi!

@joen made them originally. I think the SVGs are the original, but I'll leave it to him to confirm.

The files you attached here are the initial ones I created as smiley replacements in the Twemoji style. They're clearly off size looking at those screenshots, and digging in I found a slightly unnerving discovery.

I assumed all face emojis in the Twemoji source set were the same size and position, so I just picked one at random (1f600) and used that as a template. Only it seems that looking more closely at the twemoji set, it seems some emoji faces vary in both size and position. Some findings:

• this one is 22,737px: ​https://cloudup.com/cRUsGAFtmFd
• then there's 1f636.svg which is 21,474px, and vertically offset: ​https://cloudup.com/c8LR-P8DCTp
• this one is also 21,474px but shifted downwards: ​https://cloudup.com/cpuU1f5Ru9l
• another one which is 22,737px: ​https://cloudup.com/c8dO5_srP2D
• the PNGs also vary in size. Compare these two: ​https://cloudup.com/cC5dTBg7uLC

The SVG output code is also a bit messy:

• weird viewBox for a 24px canvas: viewBox="0 0 47.5 47.5"
• artwork is positioned using a  transform  on a group instead of having the position baked into the vectors: <g transform="translate(19,16)" id="g26">

So, as much as I love Twemoji (and you'll be hard pressed to find a bigger fan) it seems like we can deduce the following:

• perhaps the export process for twemoji isn't quite as optimal as it could be.
• the size and even position of individual emoji even in the source Twemoji set vary
• it seems like MOST of the faces are 21,474px square and centered

So pragmatically we should probably do two things:

1: pick a size for face emojis and do all the core replacements in that style. I would recommend 21,474px.
2: investigate these issues a bit more indepthly and report it upstream.

Let me know what you all think and I'll update the SVGs (and PNGs).

[iseulde]

See ​https://github.com/twitter/twemoji/issues/60.

[Joen]

I have submitted an upstream pull request which ensures consistent sizes and positions for the vast majority of yellow face emoji here: ​https://github.com/twitter/twemoji/pull/66 (some exceptions due to creative choices, like for the devil horn emoji). Head sizes used to vary between 34px and 36px inside a 38px canvas, if the pull request gets merged (which I'm confident it will), nearly all head sizes should be 34px instead.

The Twemoji Illustrator template file has a 38px base canvas. When I drew the previous smiley replacements, I had mistakenly used an SVG file as a template, and one with a head size of 36px instead of the soon-to-be-standard 34px size.

Now I have redrawn the smiley replacements based on a proper 38px canvas, with a 34px head size. SVGs and PNGs are attached for:

• mrgreen
• rolleyes
• simple-smile
• new: frownie

During yesterdays chat, @iseulde mentioned that all but mrgreen, rolleyes and simple-smile have twemoji replacements, but that frownie was missing. So now it's no longer missing. Eventually frownie and simple-smile might even hit twemoji proper: ​https://github.com/twitter/twemoji/issues/59

Previously I also drew exclaim, question, uneasy and evilgrin. I'm not sure those are used anymore, but I have attached them regardless.

Note:

There seems to be some issues with the twemoji exporter script, which means that despite the .ai files having a 38px canvas, exported SVGs are resized and given a new 24px canvas. Incidentally that explains the uneven pixel sizes we found yesterday (such as 22,737px).

The fixed SVGs and PNGs attached here assume the SVG exporter process will eventually be fixed. These SVGs have a proper 38px base canvas. So when twemoji gets fixed upstream, they will match the smileys. Until they do, they might still be slightly off.

[Joen]

Fixed smiley replacements, 38px canvas, 34px head size

[DrewAPicture]

@pento: Now that @joen has uploaded fixed-smiley-replacements-2015-04-09.zip​, what do we need to do to move this ticket forward?

[iseulde]

Thanks for the fast response Joen! :)

I agree with the frowney, exclamation and question to add, not sure about uneasy though? Seems very similar to ​https://github.com/twitter/twemoji/blob/gh-pages/72x72/1f615.png? And we don't need evilgrin for core, right?

[iseulde]

Is it frownie, frowny or frowney? Maybe make it simple-frown? :)

[iseulde]

Made some other replacements that I think are better.

[Joen]

Made some other replacements that I think are better.

I trust your judgement totally. I haven't been following the details of which emoji could map to which smileys in too much depth, so I only wanted to make sure you had all the assets you needed! Totally fine to not use them, probably better in fact :)

[pento]

In 32104:

Smilies: Update our few remaining smilies to better align with Twemoji, and add frownie.png until Twemoji provide a build containing it.

Props joen.

See #31709.

[pento]

In 32105:

Smilies: Tweak which smiley matches which emoji.

Props iseulde.

See #31709.

[pento]

The only thing left to do is to replace simple-smile.png and frownie.png with their emoji equivalent.

​https://github.com/twitter/twemoji/pull/67 has been accepted, but the SVGs and PNGs haven't been built, so that can happen sometime later.

[pento]

In 32107:

Smilies: One more tweak to matching smilies with emoji.

Props iseulde.

See #31709.

[ocean90]

In 32109:

Remove executable bit from smilies.

see #31709.