Web ve HTML

Emoji gösterimi

Bir karakterin renkli emoji glifi ile gösterilmesi, genellikle Variation Selector 16 (U+FE0F) kullanılarak. Bazı karakterler varsayılan olarak emoji sunumu, diğerleri metin sunumu kullanır.

· Updated

What Is Emoji Presentation?

Emoji presentation is the default rendering style for a Unicode character that has both an emoji form and a text form. When a character has emoji presentation as its default, software renders it as a colorful, pictographic glyph — the kind you see in messaging apps and social media — rather than as a monochrome text symbol.

Many characters exist in both forms. For example, U+2764 HEAVY BLACK HEART can appear as a plain black heart (text presentation) or as a vivid red heart emoji (emoji presentation), depending on the default and any variation selectors applied.

The Unicode Emoji Presentation Property

Unicode assigns each character one of three values for the Emoji_Presentation property:

  • Emoji_Presentation = Yes: The character defaults to emoji rendering. Most modern emoji (😀 🎉 🌍) fall here.
  • Emoji_Presentation = No: The character defaults to text rendering but can be forced to emoji rendering with VS16 (U+FE0F).
  • Text characters: Characters with no emoji form at all.

You can look up a character's emoji presentation status in the Unicode emoji-data.txt data file.

Variation Selectors

Two variation selectors control presentation:

  • U+FE0E (VS15, TEXT VARIATION SELECTOR): Forces text (monochrome) rendering.
  • U+FE0F (VS16, EMOJI VARIATION SELECTOR): Forces emoji (colorful) rendering.
U+2764           ❤   (platform-dependent default — often text)
U+2764 U+FE0F   ❤️  (forced emoji presentation)
U+2764 U+FE0E   ❤   (forced text presentation)

U+2614           ☔   (defaults to emoji on most platforms)
U+2614 U+FE0E   ☔   (forced text)

Why It Matters

Presentation affects:

  1. Visual consistency: A heart emoji on iOS may look different from Android, but both are color emoji. The text form is always monochrome.
  2. Font rendering: Emoji use color font formats (CBDT, SBIX, COLRv1); text uses conventional outlines. Mixing them can cause alignment issues.
  3. Copy-paste behavior: Applications may strip or preserve variation selectors, changing the presentation when text moves between systems.
  4. Screen reader behavior: Some screen readers announce emoji by name (🙂 = "slightly smiling face") and may treat text presentation differently.
  5. Search and matching: A ❤️ (with VS16) and ❤ (without) are technically different byte sequences.

Code Examples

# U+2764 with and without emoji variation selector
heart_text  = "\u2764"         # ❤ (bare, often text on macOS)
heart_emoji = "\u2764\uFE0F"  # ❤️ (emoji presentation)
heart_force_text = "\u2764\uFE0E"  # ❤ (text presentation)

len(heart_emoji)  # 2 (two code points)

# Check if string ends with emoji variation selector
heart_emoji[-1] == "\uFE0F"  # True

# Removing variation selectors
import unicodedata
def strip_vs(s):
    return "".join(c for c in s if c not in ("\uFE0E", "\uFE0F"))

strip_vs("❤️")  # "❤"
// JavaScript
const heartEmoji = "\u2764\uFE0F";  // ❤️
const heartText  = "\u2764\uFE0E";  // ❤

heartEmoji.length;  // 2
[...heartEmoji];    // ["❤", "️"] — two code points

Emoji in HTML

<!-- Direct: browser uses default presentation -->
<span>&#x2764;</span>       <!-- ❤ — depends on OS/browser -->

<!-- Forced emoji presentation via variation selector -->
<span>&#x2764;&#xFE0F;</span>  <!-- ❤️ -->

<!-- CSS approach: emoji font stack ensures color rendering -->
<span style="font-family: 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;">
  &#x2764;
</span>

Quick Facts

Property Value
Unicode property Emoji_Presentation
Emoji VS U+FE0F (forces colorful rendering)
Text VS U+FE0E (forces monochrome rendering)
Default emoji chars ~1,400+ in Unicode 15
Color font formats CBDT/CBLC, SBIX, COLRv0/v1
Platform variation Emoji glyph designs differ per platform (Apple, Google, Twitter)
ZWJ sequences Many emoji are composed with Zero Width Joiner (U+200D)

İlgili Terimler

Web ve HTML içinde daha fazlası