Why can text length differ between bytes, code points, and visible characters?

They answer different questions:

• Bytes count encoded data used to store or transmit text. The number depends on the encoding, so name it—for example, UTF-8.
• Code points count Unicode values in the text. A letter and a combining accent attached to it are two code points, even if they appear together.
• User-perceived characters are closer to the units a person treats as one character while reading or editing. A grapheme cluster can contain multiple code points. The count depends on the text and operation, so it is not one universal measure. [S1]

For a mixed example, take e followed by a combining acute accent, then 🙂:

• UTF-8 bytes: 7 (1 + 2 + 4)
• Unicode code points: 3
• Approximate user-perceived characters: 2 (the accented letter and the emoji)

These are different measures, not conflicting answers.

Match the count to what the limit is designed to control. If it limits encoded data size, count bytes using the specified encoding. If it limits Unicode values, count code points. If it is meant to limit the characters a person experiences, use a suitable user-perceived-unit counting method.

Check the limit’s documentation or ask its owner which measure it uses. Don’t assume an interface’s displayed count, a programming language’s string length, and a storage limit all use the same measure. If the method is unstated, report that ambiguity rather than presenting one count as definitive.

No. JavaScript strings are handled in UTF-16 code units, which differ from both code points and user-perceived characters. Some code points need more than one UTF-16 code unit, and a visible unit can consist of multiple Unicode values. [S2]

For e + combining acute accent + 🙂, JavaScript’s string.length is 4: one code unit for e, one for the accent, and two for the emoji. That is neither the 3 code points nor the approximate 2 user-perceived characters. Use the count your task requires; for a user-facing limit, choose a grapheme-aware approach that matches the intended behavior.

Name the string, the measure, and—where relevant—the encoding and counting method. For example:

Text: e + combining acute accent + 🙂. UTF-8 byte count: 7. Unicode code-point count: 3. Approximate user-perceived character count: 2.

If you are reporting a programming-language property, name the language and property too. For instance, JavaScript string.length reports UTF-16 code units, not visible characters. [S2] This example does not establish what any particular app or service counts toward its limit; check that product’s stated rules.