{
  "id": 18058840,
  "title": "Why \"👨👩👧👦\".length Is 11: Counting Characters the Way Users See Them",
  "url": "https://urgent.news/2026/11/04/why-length-is-11-counting-characters-the-way-users-see-them",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-04T02:59:11.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/toolmaxo/why-length-is-11-counting-characters-the-way-users-see-them-3kba"
  },
  "original_language": "en",
  "account": "JavaScript's default `string.length` method counts UTF-16 code units, not what users actually see. This led to an error when counting the emoji family 👨👩👧👦, which JavaScript reported as 11 characters. Users only see one character in this emoji. To fix this bug, we need to count graphemes, which represent what a user perceives as a single character. Unicode defines graphemes, or extended grapheme clusters, as the building blocks of text that users recognize as individual characters. There are multiple ways to count graphemes in JavaScript. The most straightforward method is using the built-in `Intl.Segmenter` in modern browsers and Node.js. We first create a grapheme segmenter object, then use the `segment()` method to split the string into individual graphemes. Finally, we count the number of resulting segments. For compatibility with older browsers, we can fall back to counting code points, which is still more accurate than using `string.length`. When counting characters for user input, such as captions, bios, SMS, or form fields, it's essential to use graphemes instead of raw code points to ensure users can see and edit what they're typing. For third-party limits or database columns, use UTF-8 byte count or the platform's specific counting method. The provided code snippets demonstrate how to implement a grapheme counter in JavaScript, ensuring accurate character counts across various platforms and use cases.",
  "summary": "Our word counter had a bug that no unit test caught: it said the family emoji 👨👩👧👦 is 11 characters . Users see one. If you build anything with a character limit (captions, bios, SMS, form fields), you probably have the same bug, because the default way to count a string in JavaScript counts something users never see. The test We ran seven strings through four ways of counting: Text .length…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}