Correct emoji display size

[Bugsbane]

Currently, when feed items are displayed, sites will often use images for emoji that are designed for HDPI in their feeds. On non HDPI devices, this seems to lead to emojis being displayed at freakishly large sizes, like this:

Realistically, emoji's should be displayed at a size of 1-1.2em, so they match the size of the text they're displayed with. The challenge though is knowing which images in the feed are emoji's and what are just images being sent through without any scaling info.

I suggest that we check images inserted in content items before displaying them, and if they meet the following criteria, resize them to 1.2em high:

1. Height is not set by the html/css from the feed item.
2. Linked source image has the same height as width (eg it's a square)
3. Height is between 16-128px.

Doing this would change the example above, to look like this:

[SMillerDev]

But emoji aren't images by default. They're text. The feed you're referencing abuses images to act like emoji, which is fine but it'll give weird results in News.

[Bugsbane]

Ok, but the discussion still remains about how to best display feeds that do this. This particular feed was created by Discourse which is pretty popular, and I have a number of feeds from other sources that do the same thing. Whether they should be doing this is secondary to the question of how to create the best user experience for feeds like this?

[SMillerDev]

The best user experience would be asking feed authors to stop doing this. The second best is disabling all images and the worst is making some guesses and assumptions to try and work around the problem.

[anoymouserver]

You could probably use some custom CSS to style the emoji images for this particular feed.
https://nextcloud.github.io/news/features/customCSS/

[Bugsbane]

This requires the user to be proficient in CSS and to write specific CSS for each feed. I'm thinking about how we can improve on this, fixing oversized emojis for the vast majority of the users most of the time without any CSS knowledge or work on their behalf.