[wp-trac] [WordPress Trac] #31709: Size difference for Emoji in Chrome

[WordPress Trac]

#31709: Size difference for Emoji in Chrome
--------------------------+--------------------
 Reporter:  saracannon    |       Owner:
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  4.2
Component:  Formatting    |     Version:  trunk
 Severity:  normal        |  Resolution:
 Keywords:  needs-patch   |     Focuses:  ui
--------------------------+--------------------

Comment (by 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 with it 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 indeed 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 — pretty sure I used this one as a
 template: 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
 being 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.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/31709#comment:9>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform