WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#37566 closed defect (bug) (fixed)

Update the Twemoji loader to include the rainbow flag

Reported by: pento Owned by: pento
Milestone: 4.6 Priority: normal
Severity: minor Version: 4.6
Component: Emoji Keywords: has-patch has-screenshots commit dev-reviewed
Focuses: javascript Cc:
PR Number:

Description

[38179] added support for the rainbow flag to core, but platform compatibility is a bit strange, because the flag was defined out of sync with the usual Unicode release cycle.

As such, we end up with a bit of weird scenario - Windows 10 and Android N beta support all Unicode 9.0 emoji, but don't support the rainbow flag. iOS 10 beta supports both the rainbow flag and all of Unicode 9.0, presumably OSX will be updated with the same support.

Given the cultural relevance of the rainbow flag, I expect it will be reasonably popular - Windows 10 and Android N will likely get an update to add support for it, but in the mean time, I think it's appropriate for us to step in and provide a seamless experience.

The Twemoji loader already has an exception for flags - it'll load if the browser supports everything but flags, and then only replace flag emoji, leaving everything else as native rendering.

I think it would be reasonable to add the rainbow flag to that test, and replace all flags if the browser doesn't support the rainbow flag.

This will also require updating window.wp.emoji.parse(), as the rainbow flag (and pirate flag, for that matter) don't match the usual flag byte sequences.

Related: #37543.

Attachments (4)

37566.diff (2.4 KB) - added by pento 3 years ago.
Android N - before.png (156.1 KB) - added by pento 3 years ago.
Android N - after.png (147.4 KB) - added by pento 3 years ago.
iOS 10.png (85.8 KB) - added by pento 3 years ago.

Download all attachments as: .zip

Change History (16)

@pento
3 years ago

#1 @pento
3 years ago

  • Keywords has-patch added; needs-patch removed

37566.diff fixes this.

@ocean90: Do you have opinions on including this in 4.6?

#2 @pento
3 years ago

  • Keywords needs-testing needs-screenshots added

Needs testing and screenshots on:

  • Windows 7 and 10
  • iOS 9 and 10
  • OSX 10.11 and 10.12
  • Android N, and whatever older version

#3 @ocean90
3 years ago

  • Keywords needs-testing needs-screenshots removed
  • Milestone changed from Awaiting Review to 4.6
  • Type changed from enhancement to defect (bug)
  • Version set to trunk

@pento The loader has one job: provide a seamless experience of emoji on devices which don't fully support them. After [38179] we can't fully guarantee this anymore. This needs to be fixed.

The patch looks good, but I don't have Windows 10 or Android N handy to test it.

#4 @pento
3 years ago

Confirmed:

  • Windows 7: All emoji render using Twemoji.
  • iOS 9: All emoji render using Twemoji.
  • OSX 10.11: All emoji render using Twemoji.
  • Android 5.1: All emoji render using Twemoji.
  • Android N: Only flag emoji render using Twemoji, all others are native.

OSX 10.12 doesn't have updated emoji yet, so there's no need to test it.

I'm downloading Windows 10 and Xcode 8 (with the iOS 10 simulator) to test them.

#5 @pento
3 years ago

  • Keywords has-screenshots added
  • Owner set to pento
  • Status changed from new to assigned

Attached before/after screenshots in Android N.

#6 @pento
3 years ago

Windows 10: All emoji render using Twemoji. It seems that Edge hasn't been updated to use the new emoji set. Chrome behaves the same.

Firefox tries to use the new emoji set, but doesn't render Unicode 9 emoji correctly, so falls back to Twemoji as well.

@pento
3 years ago

#7 @pento
3 years ago

iOS 10 hasn't added Unicode 9 support, yet.

As can be seen in iOS 10.png, when I disable the Unicode 9 test, it renders the rainbow flag correctly.

Last edited 3 years ago by pento (previous) (diff)

#8 @ocean90
3 years ago

  • Keywords commit dev-reviewed added

This looks good.

#9 @ocean90
3 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 38194:

Emoji: Update the Twemoji loader to include the rainbow flag.

[38179] added support for the rainbow flag to core, but platform compatibility is a bit strange, because the flag was defined out of sync with the usual Unicode release cycle. For example Android N supports all Unicode 9.0 emoji, but doesn't support the rainbow flag thus the rainbow flag isn't rendered.
The Twemoji loader already has an exception for flags - it'll load if the browser supports everything but flags, and then only replace flag emoji, leaving everything else as native rendering. To provide a seamless experience for all flags the loader now uses the rainbow flag to test flag support.

Props pento.
See #37543.
Fixes #37566.

#10 @ocean90
3 years ago

In 38195:

Emoji: Update the Twemoji loader to include the rainbow flag.

[38179] added support for the rainbow flag to core, but platform compatibility is a bit strange, because the flag was defined out of sync with the usual Unicode release cycle. For example Android N supports all Unicode 9.0 emoji, but doesn't support the rainbow flag thus the rainbow flag isn't rendered.
The Twemoji loader already has an exception for flags - it'll load if the browser supports everything but flags, and then only replace flag emoji, leaving everything else as native rendering. To provide a seamless experience for all flags the loader now uses the rainbow flag to test flag support.

Merge of [38194] to the 4.6 branch.

Props pento.
See #37543.
See #37566.

#11 @peterwilsoncc
3 years ago

Why is the national flag test being kept? It seems safe to assume rainbow flag support indicates other flag combinations are supported.

Sorry for the tardiness of my comment, was offline.

#12 @pento
3 years ago

Windows 10, even with its latest emoji update, doesn't support national flags. Given how long they've held out on doing that, I don't really want to assume whether they'll add national flags, rainbow flag, or both in the future.

Note: See TracTickets for help on using tickets.