Project

General

Profile

Actions

Feature proposal #8718

closed

Replace twemoji entirely with font based emojis

Added by krileon about 3 years ago. Updated over 1 year ago.

Status:
Closed
Priority:
Normal
Assignee:
Target version:
Start date:
27 September 2021
Due date:
% Done:

100%

Estimated time:

Description

These can't be scaled properly without distorting/bluring them and we need to make some usages larger in certain situations. So replace this image based emoji usage with entirely font icon based usage.

Actions #1

Updated by krileon about 3 years ago

Might be better to support unicode emoji only and get rid of the custom emoji parsing.

Spec: https://www.unicode.org/reports/tr51/tr51-19.html
List: https://unicode.org/emoji/charts/full-emoji-list.html

Only include those that are available in all major browsers (nearly all of them). Then completely remove the need for a stored database of emojis or configuration of them since they're all just valid unicode anyone can use right now (this feature would just be providing a handy categorized selector for them).

Additional links that might be of use as follows.

https://getemoji.com/
https://emojipedia.org/

Also add a category selection for kaomoji, which are just text based emojis.

https://getkaomoji.com/

Once implemented the entire storage functionality for emotes can be completely removed. This would just be a simple PHP array that can be imported and cached by PHP.

This will result in a lot of HTML elements so probably the best way to handle it is either an ajax response (risks being too slow), 1 central HTML node for the emoji that's re-used, or just dynamically built out when the tooltip opens and sits in JS. Last 2 options probably being the best. Could be worth using a library like one of the following to cover this usage.

https://github.com/missive/emoji-mart (with https://github.com/missive/emoji-mart/pull/510 applied)
https://github.com/OneSignal/emoji-picker
https://github.com/mervick/emojionearea
https://github.com/joeattardi/emoji-button
https://github.com/nolanlawson/emoji-picker-element

Actions #2

Updated by krileon about 3 years ago

First step is collecting a JSON data set for the emoji. This will then be pushed to local storage. Next implement the necessary JSON to handle hotswapping. The above pre-existing solutions aren't going to work well for J3 since they're modules and custom elements, but can be considered later when moving to AlpineJS. For now a simple custom solution needs to be implemented instead.

Official Unicode Datasets can be found below.

https://unicode.org/Public/emoji/13.1/
https://unicode.org/Public/13.0.0/ucd/emoji/

Need to parse this into a suitable JSON structure or maybe use https://cldr.unicode.org/.

Already done as existing Github project see https://github.com/milesj/emojibase

Actions #3

Updated by krileon about 3 years ago

  • % Done changed from 0 to 30

Slimmed JSON file now done at only 66kb before gzip.

Actions #4

Updated by krileon about 3 years ago

  • % Done changed from 30 to 40
Actions #5

Updated by krileon about 3 years ago

  • Tracker changed from Bug to Feature proposal
Actions #6

Updated by krileon about 3 years ago

  • % Done changed from 40 to 60
Actions #7

Updated by krileon about 3 years ago

  • % Done changed from 60 to 80
Actions #8

Updated by krileon almost 3 years ago

  • Status changed from Assigned to Resolved
  • % Done changed from 80 to 100
Actions #9

Updated by krileon over 1 year ago

  • Status changed from Resolved to Closed
Actions

Also available in: Atom PDF