search

My-Little-Forum / mylittleforum

A simple PHP and MySQL based internet forum that displays the messages in classical threaded view (tree structure)
GNU General Public License v3.0
122 stars 48 forks source link

Emoji Support #642

Closed loesler closed 1 year ago

loesler commented 2 years ago

One reason to switch to utf8mb4 was to support emoji, cf. Umbau der Datenbank für Unicode-Emojis. However, up to know, smileys are represented by images and one has to know the emoji-code. For that reason, I created a test page that contains a proposal for adding unicode emoji to mlf. Currently, the full list of emoji is added regardless of whether an emoji-icon exists.

1) Is such an implementation /better/ than the current one? 2) How to handle non existing emoji-icons? 3) How to handle IE11? 4) Any other suggestions?

Please check out this Emoji-Testpage.

Helmut01 commented 2 years ago

Hi Micha,

just observations in my forum. Whether emojis are displayed in their doubtful colored beauty seemingly depends on the browser. Try my forum in mix view and esp. the first three posts. Checked in the latest browser version on Windows:

  1. Firefox, SeaMonkey, Tor: Emojis – as expected – in color.
  2. Chrome, Opera, Edge, IE11: Emojis in the color of the text, the pushpin in black.

Maybe I screwed up somewhere.

loesler commented 2 years ago

Hi Helmut,

in Opera, the emojis are colored, cf. emoji

However, the color is not the main problem. At least in Opera, some emojis seem to be undefined. These emojis are shown as blue rectangle in the following screenshot. How to handle these emojis?

emoji_picker

/Micha

Helmut01 commented 2 years ago

Hi Micha,

not on mine (v90.0.4480.84 on Windows): Opera

I’m afraid we can do nothing with the “missing” ones. That’s why I stated a warning in my forum’s Instructions. BTW, depending on the browser the capsule in the example looks like this image (19×17px) or image (21×14px) If we want to replace the GIF-smilies with their emoji-counterparts we would have to check a lot of browsers (-versions) on many OSs (Windows, Linuxes, OSX, Android, …). Do we really want to go there?

auge8472 commented 2 years ago

The placeholder rectangles are unicode code points for chars/emojis, the browser does not find the char/emoji for. Some browsers in some operating systems will find a font with a char for this code point, some in some combination not. See therefore my following screenshot from the test page. Firefox in Ubuntu 20.04 with Mate desktop. There are emojis from at least two fonts (one coloured, one with only a contour of the emoji) and several chars with the placeholder for not found chars.

mlf2-emoji-list

To make the confusion complete I show now a screenshot of the same section of the same function in the SelfHTML-forum, made with the same combination of browser and OS. All chars are displayed, no placeholders, no different font.

mlf2-emoji-list-selfforum

Even, when I add the font-family-rule from the SelfHTML-forum to my own version of the MLF-test-page, the emoji-list remains incomplete. :-/

loesler commented 2 years ago

Hello,

I uploaded a font and - if the font is loaded - it works. However, this is not my preferred smart solution. If this is the only robust way, we should revert to the normal PNG files...

/Micha

auge8472 commented 2 years ago

For comparision: The emoji-selection-bar in Windows 10 at work with Firefox (as far as I know without any strange configuration):

mlf-emojji-selection-windows-10

Same view in Chrome (similar to your screenshots).

I uploaded a font and - if the font is loaded - it works. However, this is not my preferred smart solution. If this is the only robust way, we should revert to the normal PNG files...

We need further research. Other services got it running.

loesler commented 2 years ago

For comparision: The emoji-selection-bar in Windows 10 at work with Firefox (as far as I know without any strange configuration)

In your screenshot, the external font is not loaded. It is easy to verify, that different fonts are used in your screenshot to display emojis. If the external font is available/downloaded, the emojis look more unified, cf.

emoji

Maybe, you have to open the box several times. I checked the result in Edge, Opera and Firefox on two different computers (both with win10).

We need further research. Other services got it running.

I believe, these services make use of external fonts, too.

auge8472 commented 2 years ago

Sorry for causing misunderstanding. My comparision (Linux and Windows) affected my own test page with the same font-family-settings as in the SelfHTML.org-forum. I expected a different outcome because of different installed fonts on my personal computer (Linux) and the machine for my job (Windows). But as one can see, there are the same chars missing and the same chars in a different font in the screenshots from both machines.

In your test page with the web font the missing emojis are still missing but the others seems to be using all the same font (on the Linux machine with no restrictions from uBlock-Origin or something similar tool).

auge8472 commented 2 years ago

CoVid time (more or less over) brings boredom.

I compared the solution in the SelfHTML forum again with our attempts. I took over the font-family-settings for the postings and the Emoji-selection-box, no success. I checked, if my persomal computer had installed a proper font and installed one free emoji font (Noto Emoji Regular) on my system, no success.

The only solution was to use a web font with @font-face. Because the only for free downloadable file type of the font was TTF with a file size of around 24MB (what is out of question) I converted the font to WOFF (2.3MB) and WOFF2 (5.4MB). With that step I can see now all emojis. I wonder, why the WOFF2 file is so much larger than the WOFF file because the compression algorithm of WOFF2 should be so much better than the one od WOFF.

The font files are uploaded to the mylittleforum.net-webspace. And yes, even 2.3 MB is far from anything like MyLittleFont. 😉

A second thing is the emoji-selection-box in itself. I am working on an alternative construction. We will see, if I'll get a working result.

loesler commented 2 years ago

FYI: SELFHTML uses a service like https://missive.github.io/emoji-mart/

auge8472 commented 2 years ago

I will ask for support in the SelfHTML-forum.

auge8472 commented 1 year ago

FYI: SELFHTML uses a service ...

Yes, I think they use the external service named "Emoji Mart".

While writing a feature list for MLF2 I came across the emoji issue and the necessitiy of a dedicated font again. I remembered the upgrades of messenger software, namely Text Secure/Signal, where the installation of a new version of such dedicated fonts was mentioned every when and then. So it seems to me, that even big players are not willing to count on the OS and the fonts they provide.

In general we can assume, that there are forums where emojis are very welcome and other installations where they do not matter. This speaks for a emoji-select-box being an optional feature. In general it would be possible to install an emoji font for the forum as the forum operator and to choose the font in the admin panel afterwards i.e. on the smilies management page. But such a font can be incomplete in regard of the number of emojis by itself. To prevent showing the user a selection box with broken emojis, it would be nice to have an automatism to detect missing emojis and to sort them out.

Currently I've no plausible idea how to handle this immature idea.

loesler commented 1 year ago

As long as the browser support is not given, I put the project on hold.