Huge Emojis in Support Forum

[talextech]

For the past few days we've been seeing huge emojis in the support forum (basically they have no width set and the full image size is showing.

I'm not sure where this CSS should be added but something like this fixes the issue:

#bbpress-forums div.bbp-reply-content img.emoji {
    width: 1em;
    vertical-align: middle;
}

[dd32]

The page in question: ​https://wordpress.org/support/topic/error-for-site-owner-invalid-key-type-10/

This appears to need the WordPress core emoji fallback code to trigger, as it's just a plain emoji for me.

Twemoji/WordPress should be handling the styles for this I thought.

Upstream issue in Blocks Everywhere has some more information, but I think is probably unrelated: ​https://github.com/Automattic/blocks-everywhere/issues/135

[dd32]

Just noting I threw some CSS into the Customizer temporarily for this.

/* https://meta.trac.wordpress.org/ticket/7141 */
#bbpress-forums div.bbp-reply-content img.emoji {
   height: 1em;
   width: 1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
}

That's based on the CSS that twemoji suggest.

It looks like something is setting the wrong styles in certain browsers, see ​https://wordpress.slack.com/archives/C02RQC6RW/p1689333732120879

[dd32]

In 12748:

Support: Define some base styles for emoji fallback images.

Props talextech.
See #7141.

[talextech]

Thank you :)

[dhruvishah2203]

I think we need to find some different ways to identify the emoji because sometimes emoji are added to the text and at that time we do have classes like img.emoji So can we have any other options? @dd32 @talextech

[dd32]

Replying to dhruvishah2203:

I think we need to find some different ways to identify the emoji because sometimes emoji are added to the text and at that time we do have classes like img.emoji So can we have any other options?

@dhruvishah2203 Do you have an example of that?

Emojis should only fall into two groups:

• Literal Emoji characters
• img.emoji fallback images created by Twemoji when the browser cannot display the literal emoji characters.

[dd32]

Marking as resolved; Not aware of any recent reports.