Making WordPress.org

Opened 9 months ago

Last modified 9 months ago

#7141 accepted defect (bug)

Huge Emojis in Support Forum

Reported by: talextech's profile talextech Owned by: dd32's profile dd32
Milestone: Priority: high
Component: Support Forums Keywords:
Cc:

Description

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. https://prnt.sc/cWAjuDkhAh-1

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;
}

Attachments (1)

ksnip_20230714-135000.png (63.3 KB) - added by talextech 9 months ago.

Download all attachments as: .zip

Change History (8)

#1 @dd32
9 months ago

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://meta.trac.wordpress.org/ticket/7141

Version 1, edited 9 months ago by dd32 (previous) (next) (diff)

#2 @dd32
9 months ago

  • Owner set to dd32
  • Status changed from new to accepted

#3 @dd32
9 months ago

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

#4 @dd32
9 months ago

In 12748:

Support: Define some base styles for emoji fallback images.

Props talextech.
See #7141.

#5 @talextech
9 months ago

Thank you :)

#6 follow-up: @dhruvishah2203
9 months ago

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

Last edited 9 months ago by dhruvishah2203 (previous) (diff)

#7 in reply to: ↑ 6 @dd32
9 months ago

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.
Note: See TracTickets for help on using tickets.