UTF8 UTF-8 & Emojis

Handle Unicode text, emoji, encoding, normalization, code points, and safe storage.

Lessons

Sign in to save progress

1 UTF-8 & Emoji Tutorial 2 UTF-8 & Emoji HOME 3 Introduction to Text Encoding 4 What Is Character Encoding 5 A Short History of Encodings 6 ASCII 7 Extended ASCII & Code Pages 8 Latin-1 (ISO-8859-1) 9 What Is Unicode 10 Code Points 11 UTF-8 Encoding Basics 12 How UTF-8 Encodes Bytes 13 UTF-16 & Surrogate Pairs 14 UTF-32 15 UTF-8 vs UTF-16 vs UTF-32 16 Why UTF-8 Won the Web 17 The Byte Order Mark (BOM) 18 Encoding & Decoding 19 Bytes vs Characters 20 Declaring the Charset 21 Charset in HTTP Headers 22 The HTML meta charset Tag 23 BOM vs meta Declaration 24 Saving Files as UTF-8 25 Mojibake: Garbled Text 26 The Replacement Character 27 Debugging Encoding Problems 28 Double Encoding 29 Unicode Planes & Blocks 30 The Basic Multilingual Plane 31 Unicode Character Categories 32 Scripts & Writing Systems 33 Combining Marks 34 Unicode Normalization 35 NFC vs NFD 36 NFKC vs NFKD 37 Canonical Equivalence 38 Case Folding 39 Collation & Sorting 40 Bidirectional Text 41 Control & Invisible Characters 42 Confusable Characters 43 Unicode Escapes in Code 44 Introduction to Emoji 45 Emoji Code Points and Grapheme Clusters 46 Grapheme Clusters 47 ZWJ Emoji Sequences 48 Skin Tone Modifiers 49 Flag Emoji 50 Family & Role Emoji 51 Variation Selectors 52 Keycap Sequences 53 Counting Emoji Correctly 54 Iterating Over Emoji 55 Reversing Strings Safely 56 Truncating Text with Emoji 57 Intl.Segmenter for Graphemes 58 How Emoji Render 59 Emoji Fonts 60 Building an Emoji Picker 61 Emoji Accessibility 62 Emoji & Screen Readers 63 Labeling Emoji 64 Emoji in Content & Tone 65 UTF-8 in JavaScript 66 String Length in JavaScript 67 codePointAt & fromCodePoint 68 Iterating Strings with Spread 69 String.normalize() 70 TextEncoder & TextDecoder 71 Unicode-Aware Regex 72 encodeURIComponent & escape 73 Base64 & Unicode 74 UTF-8 in PHP 75 PHP mbstring Functions 76 PHP HTML Encoding 77 UTF-8 in Python 78 Python encode() & decode() 79 UTF-8 in Databases 80 MySQL utf8 vs utf8mb4 81 Database Collations 82 UTF-8 in HTML, Forms and Databases 83 UTF-8 in Forms 84 Unicode in URLs & Slugs 85 Unicode Filenames 86 UTF-8 in JSON 87 Unicode in Email 88 UTF-8 in CSV & Excel 89 UTF-8 in APIs 90 Validating UTF-8 91 Sanitizing Unicode Input 92 Unicode Security 93 Internationalization (i18n) 94 The Intl API 95 UTF-8 Best Practices 96 Common Encoding Mistakes 97 UTF-8 & Emoji Cheatsheet 98 Encoding Interview Questions 99 UTF-8 & Emoji Quiz 100 UTF-8 & Emoji Exercises 101 UTF-8 Practice Problems 102 UTF-8 & Emoji Project Ideas 103 UTF-8 & Emoji Syllabus 104 UTF-8 & Emoji Study Plan 105 UTF-8 & Emoji Bootcamp

Grapheme Clusters

UTF-8 & Emojis Lesson 46 of 105 ~1 min read

Overview

Count what users see as one character.

Grapheme Clusters is easiest to learn by reading the example, changing it, and observing the result.

Core Ideas

Understand what Grapheme Clusters changes.
Run the example.
Change one value.
Explain the result.

Step by Step

Read the Grapheme Clusters example.
Run it.
Change it.
Explain it.

Code Example

const text = 'Hi👋🏽 family👨‍👩‍👧‍👦!';

// Wrong: counts UTF-16 code units, splits emoji
console.log(text.length);

// Right: count what the user perceives as characters
const seg = new Intl.Segmenter('en', { granularity: 'grapheme' });
const graphemes = [...seg.segment(text)].map(s => s.segment);
console.log(graphemes.length, graphemes);

Checklist

Read the example and change one value.
Check the result in the browser.
Write down the rule you learned.

Common Mistakes

Skipping the example.
Changing many things at once.
Not checking the result.

Practice Challenge

Practice the Grapheme Clusters example in a small scratch file, then explain what changed and why.

Mastery Check

You can explain Grapheme Clusters.
You can change the example.
You can debug the result.

Create a free account to save which lessons you've finished. Save my progress

← Previous Next lesson →