Skip to content

Emoji Rendering Issue: Inconsistent Flag Emoji Rendering Across WordPress Self-hosted, WordPress.com, Jetpack Reader, Mobile, and Desktop Environments #24551

Open
@Jiwoon-Kim

Description

@Jiwoon-Kim

Description

Issue Body (Translated)

Self-hosted WordPress
https://travel-in-busan.com/topics/it/wp/wordpress-useful-links/
Flag emoji https://s.w.org/images/core/emoji/15.1.0/svg/1f1f0-1f1f7.svg : image loaded from org site
https://wordpress.com/reader/feeds/162495554/posts/5670302405 - WordPress Reader
Flag emoji https://i0.wp.com/s.w.org/images/core/emoji/15.1.0/72x72/1f1f0-1f1f7.png?ssl=1 loaded as PNG via Jetpack.
Problem: On mobile, it appears very large, not matching the font size. (It was like this until just now, but suddenly started rendering as a system font emoji on mobile.)

WordPress.com Blog
https://kowporg.wordpress.com/2025/05/17/wordpress-useful-links/
Flag emoji https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/svg/1f1f0-1f1f7.svg loaded from com site
https://wordpress.com/reader/feeds/169602085/posts/5670149998
On desktop: 🇰🇷 rendered via system font.
On Windows 11, flag emoji rendering not supported (regional indicator symbols show as "KR")
On mobile (Samsung Galaxy), rendered via system font emoji — expected Noto Color Emoji on Android, but appears to be Samsung’s custom emoji.

https://kowporg.wordpress.com/2025/05/17/emoji-debug/
On Windows OS, flag emoji loaded via SVG
https://wordpress.com/reader/feeds/169602085/posts/5670432387
All rendered via system font, but flag emoji not rendered on Windows.

At https://kowporg.wordpress.com/2025/05/17/emoji-debug/
On Windows OS, flag emoji is loaded via SVG.
Additionally, when viewed on desktop, the spacing between emojis is inconsistent — some emojis break to the next line unexpectedly, while others overflow beyond the post template layout and continue in a single line.

This issue occurs inconsistently depending on emoji type and rendering method (SVG image vs system font emoji), and affects overall post layout appearance.

Summary of the current situation:
Between WordPress self-hosted / WordPress.com / Jetpack Reader / mobile / desktop environments, the emoji fetch paths, formats, and rendering methods differ subtly.
Especially for flag emojis, behavior changes based on OS + browser + WordPress setup.

WordPress Self-hosted vs WordPress.com Reader
Self-hosted: core emoji script calls SVG emojis via wp-emoji-release.min.js and outputs them with <img> tags.
WordPress.com Reader: Depending on the situation, prioritizes browser system font emoji rendering.
→ Windows 11 doesn’t support flag emoji (Regional Indicator Symbol 🇰🇷) in its system font, so it displays as "KR"
→ Android Galaxy devices apply Samsung emoji

Jetpack Reader and CDN caching path difference
Jetpack processes image paths via https://i0.wp.com/ proxy.
→ Loads PNG emojis with <img> tags, ignoring font size and displaying in original size
→ This was the reason why it appeared large on mobile

Browser / OS / Theme / Caching issues
Emoji rendering is heavily affected by caching.

Step-by-step reproduction instructions

/

Screenshots, screen recording, code snippet

Screenshot_20250518_000344_Jetpack.jpg

Screenshot_20250518_000432_Jetpack.jpg

Environment info

No response

Please confirm that you have searched existing issues in the repo.

  • Yes

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions