From 8f83c0838520e0888c86dfe2cfa1066c5567c6b1 Mon Sep 17 00:00:00 2001 From: Gary Pendergast Date: Wed, 11 Nov 2015 02:24:40 +0000 Subject: [PATCH] Emoji: Use twemoji in browsers that don't support Unicode 8 emoji. Some less advanced browsers are yet to add support for the important advances made in Unicode 8. Let's make ensure that their users can experience emoji in their full glory. See #33592. git-svn-id: https://develop.svn.wordpress.org/trunk@35606 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/js/wp-emoji-loader.js | 35 +++++++++++++++++---------- src/wp-includes/js/wp-emoji.js | 4 +-- 2 files changed, 24 insertions(+), 15 deletions(-) diff --git a/src/wp-includes/js/wp-emoji-loader.js b/src/wp-includes/js/wp-emoji-loader.js index 619157f710..a495f3552b 100755 --- a/src/wp-includes/js/wp-emoji-loader.js +++ b/src/wp-includes/js/wp-emoji-loader.js @@ -26,25 +26,33 @@ context.textBaseline = 'top'; context.font = '600 32px Arial'; - if ( type === 'flag' ) { + if ( 'flag' === type ) { /* * This works because the image will be one of three things: * - Two empty squares, if the browser doesn't render emoji - * - Two squares with 'G' and 'B' in them, if the browser doesn't render flag emoji - * - The British flag + * - Two squares with 'A' and 'U' in them, if the browser doesn't render flag emoji + * - The Australian flag * * The first two will encode to small images (1-2KB data URLs), the third will encode * to a larger image (4-5KB data URL). */ - context.fillText( String.fromCharCode( 55356, 56812, 55356, 56807 ), 0, 0 ); + context.fillText( String.fromCharCode( 55356, 56806, 55356, 56826 ), 0, 0 ); return canvas.toDataURL().length > 3000; } else { - /* - * This creates a smiling emoji, and checks to see if there is any image data in the - * center pixel. In browsers that don't support emoji, the character will be rendered - * as an empty square, so the center pixel will be blank. - */ - context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 ); + if ( 'simple' === type ) { + /* + * This creates a smiling emoji, and checks to see if there is any image data in the + * center pixel. In browsers that don't support emoji, the character will be rendered + * as an empty square, so the center pixel will be blank. + */ + context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 ); + } else { + /* + * To check for Unicode 8 support, let's try rendering the most important advancement + * that the Unicode Consortium have made in years: the burrito. + */ + context.fillText( String.fromCharCode( 55356, 57135 ), 0, 0 ); + } return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0; } } @@ -58,8 +66,9 @@ } settings.supports = { - simple: browserSupportsEmoji( 'simple' ), - flag: browserSupportsEmoji( 'flag' ) + simple: browserSupportsEmoji( 'simple' ), + flag: browserSupportsEmoji( 'flag' ), + unicode8: browserSupportsEmoji( 'unicode8' ) }; settings.DOMReady = false; @@ -67,7 +76,7 @@ settings.DOMReady = true; }; - if ( ! settings.supports.simple || ! settings.supports.flag ) { + if ( ! settings.supports.simple || ! settings.supports.flag || ! settings.supports.unicode8 ) { ready = function() { settings.readyCallback(); }; diff --git a/src/wp-includes/js/wp-emoji.js b/src/wp-includes/js/wp-emoji.js index 4acf43421d..3c0902a5ac 100644 --- a/src/wp-includes/js/wp-emoji.js +++ b/src/wp-includes/js/wp-emoji.js @@ -148,7 +148,7 @@ return false; } - if ( ! settings.supports.flag && settings.supports.simple && + if ( ! settings.supports.flag && settings.supports.simple && settings.supports.unicode8 && ! /^1f1(?:e[6-9a-f]|f[0-9a-f])-1f1(?:e[6-9a-f]|f[0-9a-f])$/.test( icon ) ) { return false; @@ -171,7 +171,7 @@ * Initialize our emoji support, and set up listeners. */ if ( settings ) { - replaceEmoji = ! settings.supports.simple || ! settings.supports.flag; + replaceEmoji = ! settings.supports.simple || ! settings.supports.flag || ! settings.supports.unicode8; if ( settings.DOMReady ) { load();