Character count is not proportional to display width

What it is

Grapheme and rendered-width mismatch means that a program's string length, the number of characters a user perceives, and the final pixel width are different quantities. One visible symbol can contain several Unicode code points, while shaping can combine code points into a ligature. Equal numbers of perceived characters can still occupy very different widths.

Why it happens

String APIs may count bytes, UTF code units, or Unicode scalar values, whereas the smallest unit users edit is closer to an extended grapheme cluster. Combining marks, skin-tone modifiers, zero-width-joiner sequences, and flags can turn several code points into one perceived character. Shaping then creates glyphs with advance widths, kerning, and ligatures, breaking any linear mapping from count to measure. In proportional type, narrow and wide glyphs alone can make equal-length labels wrap differently.

Where it stops holding

A monospaced font makes ordinary covered glyphs occupy roughly fixed cells; it does not guarantee that emoji, full-width characters, combining marks, or fallback fonts remain monospaced. Grapheme-cluster limits match editing expectations better than code-unit limits but still do not predict screen width. Pixel measurements apply only to the current font, size, language, shaping settings, and device scale.

Applying it

• Choose input-limit units from the business meaning; when a user sees a “character” count, prefer the platform's grapheme-cluster segmentation over UTF code units.
• Measure fit with the actual shaping/layout engine rather than multiplying count by an average glyph width.
• Ensure truncation, deletion, and cursor movement do not split combining marks, emoji modifiers, or joiner sequences.
• Test narrow and wide glyphs, combining sequences, CJK, emoji, font mixing, and text enlargement; verify counters, single-delete behavior, wrapping, and visible content against user perception.

Related

• Same group: S1.03.1 Missing glyphs trigger fallback and change layout · S1.03.2 The same character can have different glyph forms across regions · S1.03.3 Emoji and symbol rendering varies across platforms
• Adjacent: S1.01 Text expansion and layout resilience · S2.09 Regional differences in input validation
• Search terms: extended grapheme cluster · text shaping · rendered text width