2c:null 2d:["$","title",null,{"children":"Text Ellipsis… | Displayr Engineering | Observable"}] 32:T513,// This is a greedy algorithm for line wrapping. It would be better to use the // Knuth–Plass line breaking algorithm (but that would be much more complex). // https://en.wikipedia.org/wiki/Line_wrap_and_word_wrap function lineWrap(input, maxWidth, widthof) { const lines = []; let lineStart, lineEnd = 0; for (const [wordStart, wordEnd, required] of lineBreaks(input)) { // Record the start of a line. This isn’t the same as the previous line’s // end because we often skip spaces between lines. if (lineStart === undefined) lineStart = wordStart; // If the current line is not empty, and if adding the current word would // make the line longer than the allowed width, then break the line at the // previous word end. if (lineEnd > lineStart && widthof(input, lineStart, wordEnd) > maxWidth) { lines.push( input.slice(lineStart, lineEnd) + (input[lineEnd - 1] === softHyphen ? "-" : "") ); lineStart = wordStart; } // If this is a required break (a newline), emit the line and reset. if (required) { lines.push(input.slice(lineStart, wordEnd)); lineStart = undefined; continue; } // Extend the current line to include the new word. lineEnd = wordEnd; } return lines; }33:T42f,// Computed as round(measureText(text).width * 10) at 10px system-ui. For // characters that are not represented in this map, we’d ideally want to use a // weighted average of what we expect to see. But since we don’t really know // what that is, using “e” seems reasonable. defaultWidthMap = ({ a: 56, b: 63, c: 57, d: 63, e: 58, f: 37, g: 62, h: 60, i: 26, j: 26, k: 55, l: 26, m: 88, n: 60, o: 60, p: 62, q: 62, r: 39, s: 54, t: 38, u: 60, v: 55, w: 79, x: 54, y: 55, z: 55, A: 69, B: 67, C: 73, D: 74, E: 61, F: 58, G: 76, H: 75, I: 28, J: 55, K: 67, L: 58, M: 89, N: 75, O: 78, P: 65, Q: 78, R: 67, S: 65, T: 65, U: 75, V: 69, W: 98, X: 69, Y: 67, Z: 67, 0: 64, 1: 48, 2: 62, 3: 64, 4: 66, 5: 63, 6: 65, 7: 58, 8: 65, 9: 65, " ": 29, "!": 32, '"': 49, "'": 31, "(": 39, ")": 39, ",": 31, "-": 48, ".": 31, "/": 32, ":": 31, ";": 31, "?": 52, "‘": 31, "’": 31, "“": 47, "”": 47, "…": 82 })34:[] 30:{"id":"304a40fa4da6ad4d","slug":null,"title":"Text Ellipsis…","thumbnail":"6c9480c8ff20f8ab857524935ff7417a1b1320f94ed2b58da752dbf432191ca0","access_level":"public","create_time":"$D2023-04-28T13:54:32.032Z","update_time":"$D2023-04-28T14:01:21.557Z","view_time":null,"first_public_time":"$D2023-04-28T13:54:32.032Z","has_unpublished_edits":null,"fork":{"id":"79907de22983d3b6","slug":"text-ellipsis","title":"Text Ellipsis…","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"658d61ad557bfa5e","login":"displayr-engineering","name":"Displayr Engineering","avatar_url":"https://avatars-next.observableusercontent.com/9486eedfd7eeedd5579bd2fdd3232240085c04d21650839f1775cb0dd2ca494d","tier":"starter_2024"},"version":257,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f60395cebced3c6c","login":"mtsvelik","name":"Misha Tsvelik","avatar_url":"https://avatars-next.observableusercontent.com/9ef83be769fccaa60175b65abcb8fb329e45720c0290ca484f36e9cbd8d70073","tier":null}],"members":[{"type":"team","id":"658d61ad557bfa5e","login":"displayr-engineering","name":"Displayr Engineering","avatar_url":"https://avatars-next.observableusercontent.com/9486eedfd7eeedd5579bd2fdd3232240085c04d21650839f1775cb0dd2ca494d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"f60395cebced3c6c","login":"mtsvelik","name":"Misha Tsvelik","avatar_url":"https://avatars-next.observableusercontent.com/9ef83be769fccaa60175b65abcb8fb329e45720c0290ca484f36e9cbd8d70073","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Text Ellipsis…","cells":[{"id":0,"value":"# Text Ellipsis…\n## … is hard because there are weird characters out there.\n\nFor example, the family emoji 👨‍👩‍👧‍👦 is a combination of ${[...\"👨‍👩‍👧‍👦\"].length} characters: four faces glued together by three invisible [zero-width joiners](https://emojipedia.org/zero-width-joiner/): ${\"👨‍👩‍👧‍👦\".replace(/\\u200d/g, ' ⊕ ')}. However, the visible width of this emoji is just one (fat) character—not 7 or 4.\n\nPlot.text has a method to clip a text to a certain length (expressed in % of the font-size), optionally inserting an ellipsis character where (and if) clipping took place.\n\nThis notebook exports that function. Or rather, these functions, because there is one for clipping the start, middle, or end of the string. Note that this is not using actual measurements (which would require to insert the string in the DOM—and might change with CSS), but a reasonable approximation. See the comments for details.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":92,"value":"viewof str = Inputs.text({value: \"hello, 👨‍👩‍👧‍👦 world!\", label: \"text\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"viewof width = Inputs.range([10, 1000], {label: \"width (in % of font size)\", step:10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"viewof ellipsis = Inputs.radio([\"…\", \"\"], { label: \"ellipsis\", value: \"…\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`> ${clip.start(str, width, ellipsis)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`> ${clip.middle(str, width, ellipsis)}` // not recommended with ellipsis=\"\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`> ${clip.end(str, width, ellipsis)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"clip = ({\n start: (str, width, ell = \"\") => clipStart(str, width, defaultWidth, ell),\n middle: (str, width, ell = \"…\") => clipMiddle(str, width, defaultWidth, ell),\n end: (str, width, ell = \"\") => clipEnd(str, width, defaultWidth, ell)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"---\n\n*The following is directly excerpted from [plot/src/marks/text.js](https://github.com/observablehq/plot/blob/main/src/marks/text.js), and licensed under the [ISC](https://github.com/observablehq/plot/blob/main/LICENSE):*\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"softHyphen = \"\\u00ad\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"// This is a rudimentary (and U.S.-centric) algorithm for finding opportunities\n// to break lines between words. A better and far more comprehensive approach\n// would be to use the official Unicode Line Breaking Algorithm.\n// https://unicode.org/reports/tr14/\nfunction* lineBreaks(input) {\n let i = 0,\n j = 0;\n const n = input.length;\n while (j < n) {\n let k = 1;\n switch (input[j]) {\n case softHyphen:\n case \"-\": // hyphen\n ++j;\n yield [i, j, false];\n i = j;\n break;\n case \" \":\n yield [i, j, false];\n while (input[++j] === \" \"); // skip multiple spaces\n i = j;\n break;\n case \"\\r\":\n if (input[j + 1] === \"\\n\") ++k; // falls through\n case \"\\n\":\n yield [i, j, true];\n j += k;\n i = j;\n break;\n default:\n ++j;\n break;\n }\n }\n yield [i, j, true];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// This is a rudimentary (and U.S.-centric) algorithm for measuring the width of\n// a string based on a technique of Gregor Aisch; it assumes that individual\n// characters are laid out independently and does not implement the Unicode\n// grapheme cluster breaking algorithm. It does understand code points, though,\n// and so treats things like emoji as having the width of a lowercase e (and\n// should be equivalent to using for-of to iterate over code points, while also\n// being fast). TODO Optimize this by noting that we often re-measure characters\n// that were previously measured?\n// http://www.unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries\n// https://exploringjs.com/impatient-js/ch_strings.html#atoms-of-text\nfunction defaultWidth(text, start = 0, end = text.length) {\n let sum = 0;\n for (let i = start; i < end; i = readCharacter(text, i)) {\n sum +=\n defaultWidthMap[text[i]] ??\n (isPictographic(text, i) ? 120 : defaultWidthMap.e);\n }\n return sum;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"// Even for monospaced text, we can’t assume that the number of UTF-16 code\n// points (i.e., the length of a string) corresponds to the number of visible\n// characters; we still have to count graphemes. And note that pictographic\n// characters such as emojis are typically not monospaced!\nfunction monospaceWidth(text, start = 0, end = text.length) {\n let sum = 0;\n for (let i = start; i < end; i = readCharacter(text, i)) {\n sum += isPictographic(text, i) ? 200 : 100;\n }\n return sum;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"function splitter({ monospace, lineWidth, textOverflow }) {\n if (textOverflow != null || lineWidth == Infinity)\n return (text) => text.split(/\\r\\n?|\\n/g);\n const widthof = monospace ? monospaceWidth : defaultWidth;\n const maxWidth = lineWidth * 100;\n return (text) => lineWrap(text, maxWidth, widthof);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"function clipper({ monospace, lineWidth, textOverflow }) {\n if (textOverflow == null || lineWidth == Infinity) return (text) => text;\n const widthof = monospace ? monospaceWidth : defaultWidth;\n const maxWidth = lineWidth * 100;\n switch (textOverflow) {\n case \"clip-start\":\n return (text) => clipStart(text, maxWidth, widthof, \"\");\n case \"clip-end\":\n return (text) => clipEnd(text, maxWidth, widthof, \"\");\n case \"ellipsis-start\":\n return (text) => clipStart(text, maxWidth, widthof, \"…\");\n case \"ellipsis-middle\":\n return (text) => clipMiddle(text, maxWidth, widthof, \"…\");\n case \"ellipsis-end\":\n return (text) => clipEnd(text, maxWidth, widthof, \"…\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"// Cuts the given text to the given width, using the specified widthof function;\n// the returned [index, error] guarantees text.slice(0, index) fits within the\n// specified width with the given error. If the text fits naturally within the\n// given width, returns [-1, 0]. If the text needs cutting, the given inset\n// specifies how much space (in the same units as width and widthof) to reserve\n// for a possible ellipsis character.\nfunction cut(text, width, widthof, inset) {\n const I = []; // indexes of read character boundaries\n let w = 0; // current line width\n for (let i = 0, j = 0, n = text.length; i < n; i = j) {\n j = readCharacter(text, i); // read the next character\n const l = widthof(text, i, j); // current character width\n if (w + l > width) {\n w += inset;\n while (w > width && i > 0)\n (j = i), (i = I.pop()), (w -= widthof(text, i, j)); // remove excess\n return [i, width - w];\n }\n w += l;\n I.push(i);\n }\n return [-1, 0];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"function clipEnd(text, width, widthof, ellipsis) {\n text = text.trim(); // ignore leading and trailing whitespace\n const e = widthof(ellipsis);\n const [i] = cut(text, width, widthof, e);\n return i < 0 ? text : text.slice(0, i).trimEnd() + ellipsis;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"function clipMiddle(text, width, widthof, ellipsis) {\n text = text.trim(); // ignore leading and trailing whitespace\n const w = widthof(text);\n if (w <= width) return text;\n const e = widthof(ellipsis) / 2;\n const [i, ei] = cut(text, width / 2, widthof, e);\n const [j] = cut(text, w - width / 2 - ei + e, widthof, -e); // TODO read spaces?\n return j < 0\n ? ellipsis\n : text.slice(0, i).trimEnd() +\n ellipsis +\n text.slice(readCharacter(text, j)).trimStart();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"function clipDelimiter(text, width, widthof, ellipsis, delimiter) {\n text = text.trim(); // ignore leading and trailing whitespace\n const w = widthof(text);\n if (w <= width) return text;\n const e = widthof(ellipsis) / 2;\n const [i, ei] = text.split(delimiter)\n\n const [i, ei] = cut(text, width / 2, widthof, e);\n const [j] = cut(text, w - width / 2 - ei + e, widthof, -e); // TODO read spaces?\n return j < 0\n ? ellipsis\n : text.slice(0, i).trimEnd() +\n ellipsis +\n text.slice(readCharacter(text, j)).trimStart();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"function clipStart(text, width, widthof, ellipsis) {\n text = text.trim(); // ignore leading and trailing whitespace\n const w = widthof(text);\n if (w <= width) return text;\n const e = widthof(ellipsis);\n const [j] = cut(text, w - width + e, widthof, -e); // TODO read spaces?\n return j < 0\n ? ellipsis\n : ellipsis + text.slice(readCharacter(text, j)).trimStart();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"reCombiner = /[\\p{Combining_Mark}\\p{Emoji_Modifier}]+/uy","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"rePictographic = /\\p{Extended_Pictographic}/uy","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"// Reads a single “character” element from the given text starting at the given\n// index, returning the index after the read character. Ideally, this implements\n// the Unicode text segmentation algorithm and understands grapheme cluster\n// boundaries, etc., but in practice this is only smart enough to detect UTF-16\n// surrogate pairs, combining marks, and zero-width joiner (zwj) sequences such\n// as emoji skin color modifiers. https://unicode.org/reports/tr29/\nfunction readCharacter(text, i) {\n i += isSurrogatePair(text, i) ? 2 : 1;\n if (isCombiner(text, i)) i = reCombiner.lastIndex;\n if (isZeroWidthJoiner(text, i)) return readCharacter(text, i + 1);\n return i;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"// We avoid more expensive regex tests involving Unicode property classes by\n// first checking for the common case of 7-bit ASCII characters.\nfunction isAscii(text, i) {\n return text.charCodeAt(i) < 0x80;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"function isSurrogatePair(text, i) {\n const hi = text.charCodeAt(i);\n if (hi >= 0xd800 && hi < 0xdc00) {\n const lo = text.charCodeAt(i + 1);\n return lo >= 0xdc00 && lo < 0xe000;\n }\n return false;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"function isZeroWidthJoiner(text, i) {\n return text.charCodeAt(i) === 0x200d;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function isCombiner(text, i) {\n return isAscii(text, i)\n ? false\n : ((reCombiner.lastIndex = i), reCombiner.test(text));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"function isPictographic(text, i) {\n return isAscii(text, i) ? false : ((rePictographic.lastIndex = i), rePictographic.test(text));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"