Make WordPress Core

Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#31709 closed defect (bug) (fixed)

Size difference for Emoji in Chrome

Reported by: saracannon's profile saracannon Owned by: pento's profile pento
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.2
Component: Formatting Keywords:
Focuses: ui Cc:

Description

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)

Attachments (11)

emoji.jpg (38.6 KB) - added by saracannon 9 years ago.
emoji-fix.jpg (51.2 KB) - added by saracannon 9 years ago.
visual screen shot of the emoji patch
31710.diff (1.1 KB) - added by saracannon 9 years ago.
fixes emoji smileys
mrgreen.svg (1.6 KB) - added by pento 9 years ago.
rolleyes.svg (1.8 KB) - added by pento 9 years ago.
simple-smile.svg (1.5 KB) - added by pento 9 years ago.
fixed-smiley-replacements-2015-04-09.zip (25.9 KB) - added by Joen 9 years ago.
Fixed smiley replacements, 38px canvas, 34px head size
Screen Shot 2015-04-09 at 17.59.37.png (142.4 KB) - added by iseulde 9 years ago.
Screen Shot 2015-04-09 at 18.00.18.png (72.2 KB) - added by iseulde 9 years ago.
31709.patch (1.9 KB) - added by iseulde 9 years ago.
31709.2.patch (736 bytes) - added by iseulde 9 years ago.

Download all attachments as: .zip

Change History (35)

@saracannon
9 years ago

This ticket was mentioned in Slack in #core by iseulde. View the logs.


9 years ago

@saracannon
9 years ago

visual screen shot of the emoji patch

@saracannon
9 years ago

fixes emoji smileys

#2 @saracannon
9 years ago

patch also fixes #31710

#3 @DrewAPicture
9 years ago

  • Focuses ui added
  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 4.2

#4 @pento
9 years ago

  • Keywords needs-refresh added

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.

#5 @iseulde
9 years ago

  • Keywords needs-patch added; has-patch needs-refresh removed

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
9 years ago

@pento
9 years ago

@pento
9 years ago

#6 @pento
9 years ago

I've attached the original SVG files.

#7 @iseulde
9 years ago

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

#8 @pento
9 years ago

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

#9 @Joen
9 years ago

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:

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).

Last edited 9 years ago by Joen (previous) (diff)

#11 @DrewAPicture
9 years ago

  • Owner set to pento
  • Status changed from new to assigned

This ticket was mentioned in Slack in #core by drew. View the logs.


9 years ago

This ticket was mentioned in Slack in #core by pento. View the logs.


9 years ago

#14 @Joen
9 years ago

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.

Last edited 9 years ago by Joen (previous) (diff)

@Joen
9 years ago

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

#15 @DrewAPicture
9 years ago

  • Keywords dev-feedback added

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

#16 @iseulde
9 years ago

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?

#17 @iseulde
9 years ago

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

@iseulde
9 years ago

#18 @iseulde
9 years ago

Made some other replacements that I think are better.

#19 @Joen
9 years ago

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 :)

#20 @pento
9 years ago

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.

#21 @pento
9 years ago

In 32105:

Smilies: Tweak which smiley matches which emoji.

Props iseulde.

See #31709.

#22 @pento
9 years ago

  • Keywords needs-patch dev-feedback removed
  • Resolution set to fixed
  • Status changed from assigned to closed

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.

@iseulde
9 years ago

#23 @pento
9 years ago

In 32107:

Smilies: One more tweak to matching smilies with emoji.

Props iseulde.

See #31709.

#24 @ocean90
9 years ago

In 32109:

Remove executable bit from smilies.

see #31709.

Note: See TracTickets for help on using tickets.