Grapheme cluster
The unit a person sees as one character, even when Unicode stores it as several code points. Use it for correct counting and truncation.
What it is
A grapheme cluster is the closest Unicode gets to a character as a person sees it. One cluster may contain several code points, such as a letter plus a combining accent, a flag made from two regional indicators, or an emoji family joined with zero width joiners. In JavaScript, String.length counts UTF-16 code units, not these visible units: the four-person family emoji is one thing to a reader, seven code points to Unicode, and length 11 to JavaScript.
Reach for grapheme clusters when enforcing display-length limits, moving a text cursor, deleting one visible character, or truncating a label. Unicode Standard Annex #29 defines extended grapheme cluster boundaries, and Intl.Segmenter can find them in modern JavaScript.
Gotcha: Array.from handles Unicode code points but can still split a multi-code-point emoji or a base letter from its combining mark. Segment first, then count or slice the returned segments.
Ask AI for it
Replace code-unit-based text limits and truncation with grapheme-aware logic. Use Intl.Segmenter with { granularity: 'grapheme' }, collect segments from segmenter.segment(text), and count or slice only at those boundaries. Preserve the original characters of every retained segment, append the ellipsis only after segmentation, and add tests for a combining accent, a flag, a skin-tone emoji, and a zero-width-joiner family emoji.