Web & HTML

テキスト表示

デフォルトの絵文字表示の代わりに、通常は異体字セレクター15(U+FE0E)を使って文字をモノクロのテキストグリフでレンダリングすること。

· Updated

What Is Text Presentation?

Text presentation is the default rendering style for characters that display as plain, monochrome glyphs using the conventional text rendering pipeline — outlines filled with a single color, scaled and hinted by the font engine. This contrasts with emoji presentation, which uses colorful pictographic glyphs rendered from color font tables.

When a character has text presentation as its default, software renders it like any other text character: in the current font, at the current text color, without any color emoji rendering.

Characters with Both Presentations

Many characters occupy a dual existence. The dingbats block (U+2700–U+27BF), enclosed alphanumerics, and many symbols were assigned to Unicode before emoji existed. They were styled as text symbols and are now also used as emoji. Unicode assigns a default presentation to each such character:

U+260E ☎  BLACK TELEPHONE     — defaults to TEXT presentation on most platforms
U+1F4F1 📱 MOBILE PHONE       — defaults to EMOJI presentation
U+2B50 ⭐  WHITE MEDIUM STAR   — defaults to EMOJI on most platforms
U+2605 ★  BLACK STAR          — defaults to TEXT presentation

The default can vary between platforms and Unicode versions.

Forcing Text Presentation

Apply U+FE0E (VARIATION SELECTOR-15, VS15) immediately after a character to request text (monochrome) presentation:

⭐       U+2B50 alone — emoji on most systems
⭐︎      U+2B50 + U+FE0E — text presentation requested
star_default = "\u2B50"         # ⭐ (emoji default)
star_text    = "\u2B50\uFE0E"  # ⭐︎ (text presentation)

# Detecting text variation selector
star_text[-1] == "\uFE0E"  # True

# The two are not equal as strings
star_default == star_text  # False
len(star_text)             # 2

Why Use Text Presentation?

  1. Inline with body text: A black star in a table cell or rating system blends with surrounding text naturally. A color emoji star stands out visually.
  2. Print and PDF: Color emoji require color printing; text glyphs work in monochrome.
  3. Monochrome icons: Design systems that use Unicode symbols as icons (✓, →, ★) want consistent monochrome rendering across all environments.
  4. Accessibility: Screen readers may announce emoji names; text-presentation symbols may be read differently or skipped.
  5. Font control: Text-presentation characters obey CSS color, font-size, and other text properties. Emoji often ignore color.

CSS Implications

/* Text-presentation symbols respond to CSS color */
.rating::before {
  content: "\2605";    /* ★ BLACK STAR — text presentation */
  color: gold;
  font-size: 1.5em;
}

/* Emoji-presentation chars may NOT respond to color */
.emoji-star::before {
  content: "\2B50";    /* ⭐ — emoji, ignores color: red */
  color: red;          /* often has no effect */
}

Platform Differences

Default presentations are not universally consistent. What renders as text on Windows may appear as emoji on iOS. The only reliable way to guarantee a specific presentation is to append the appropriate variation selector explicitly. Web developers targeting multiple platforms should always append VS15 (\uFE0E) for symbols intended as monochrome text icons and VS16 (\uFE0F) for symbols intended as emoji.

Quick Facts

Property Value
Rendering style Monochrome, current font, current color
Force text VS U+FE0E (VARIATION SELECTOR-15)
Force emoji VS U+FE0F (VARIATION SELECTOR-16)
CSS color property Respected for text-presentation glyphs
Platform consistency Defaults vary — always use VS15/VS16 for guaranteed behavior
Font requirement Uses standard outline font; no color font needed
Screen readers May treat text symbols differently from emoji

関連用語

Web & HTML のその他の用語

Content-Type 文字セット

レスポンスの文字エンコーディングを宣言するHTTPヘッダーパラメータ(Content-Type: text/html; charset=utf-8)。ドキュメント内のエンコーディング宣言より優先されます。

CSS content プロパティ

::beforeおよび::after疑似要素でUnicodeエスケープを使って生成コンテンツを挿入するCSSプロパティ:content: '\2713'は✓を挿入します。

CSS Text Direction

CSS properties (direction, writing-mode, unicode-bidi) controlling text layout direction. Works with Unicode …

HTML エンティティ

HTMLで文字をテキスト表現する方式。3つの形式:名前(&)・十進数(&)・16進数(&)。HTMLの構文と衝突する文字に必須です。

JavaScript Intl API

ECMAScript Internationalization API providing locale-aware string comparison (Collator), number formatting (NumberFormat), date …

Punycode

Unicode ドメイン名をxn--プレフィックス付きのASCII文字列に変換するASCII互換エンコーディング。münchen.de → xn--mnchen-3ya.de。

Unicode in CSS

CSS supports Unicode via escape sequences (\2713 for ✓), the content property …

XML 文字参照

XMLバージョンの数値文字参照:✓または✓。XMLには名前付きエンティティが5個(& < > " ')しかありませんが、HTML5は2,231個あります。

パーセントエンコーディング (URL エンコーディング)

URLの非ASCII文字と予約文字を各バイトを%XXで置き換えてエンコードします。まずUTF-8に変換し、各バイトをパーセントエンコードします:é → %C3%A9。

ワードジョイナー

U+2060。改行を防ぐゼロ幅文字。ゼロ幅ノーブレークスペースとしてのU+FEFF(BOM)の現代的な代替です。