Feature proposal #8718: Replace twemoji entirely with font based emojis - CB Activity - Joomlapolis forge

Custom queries

4.0.0
4.1.0
4.2.0
4.2.1
4.3.0
4.4.0
5.0.0
6.0.0
6.0.1
6.1.0
6.1.1

Actions

Copy link

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:

krileon

Target version:

6.0.0

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.

History
Notes
Property changes

Actions

Copy link

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

Copy link

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

Copy link