30:T506,function htmlb(el, ...args) { el = html`${el.join('')}`; let text = args[0]; let elWidth; mutable debug.args = args; mutable debug.elWidth = elWidth; for (const arg of args) { if (typeof arg === "number") { elWidth = arg; } else { text = arg; } } function update() { if (!elWidth) { const temp = el.append(text); // we put the text // calculate the size elWidth = el.clientWidth; mutable debug.el = el; // el.replaceChildren(); while (el.lastChild) { // replaceChildren Polyfill el.removeChild(el.lastChild); } } const fragment = calculate(elWidth, text, { el }).reduce( (df, curr, idx, src) => { df.append(curr); if (idx + 1 < src.length) df.append(html`
`); return df; }, new DocumentFragment() ); el.append(fragment); } mutable debug.el = elWidth; if (elWidth) { const fragment = calculate(elWidth, text).reduce((df, curr, idx, src) => { df.append(curr); if (idx + 1 < src.length) df.append(html`
`); return df; }, new DocumentFragment()); el.append(fragment); return el; } else return Object.assign(el, { update }); // we "blink" the element to get it's inner width }31:T453,function calculate(elWidth, text, options = {}) { let { el, threshold } = { threshold: 0.2, el: document.body, ...options }; let textWidth = Math.ceil(measure(text, getUsedFont(el))); const n = computeN(elWidth, textWidth); const part = Math.floor(text.length / n); let newtext = [text]; let offset = 0; for (let i = 0; i < n - 1; i++) { const currentMiddle = part + offset; const sep = newtext[i]; const before = sep.lastIndexOf(' ', currentMiddle); // closest space before middle const after = sep.indexOf(' ', currentMiddle + 1); // closest space after middle let chosen = before == -1 || (after != -1 && currentMiddle - before >= after - currentMiddle) ? after : before; if (Math.abs(chosen - currentMiddle) > part * threshold) { // we hyphenate offset = 0; newtext[i] = sep.substr(0, part) + "-"; newtext.push(sep.substr(part)); } else { offset = currentMiddle - chosen; newtext[i] = sep.substr(0, chosen); newtext.push(sep.substr(chosen + 1)); } } return newtext; }32:[] 2e:{"title":"HTML line break","cells":[{"id":0,"value":"md`# HTML line break`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`Did you ever wanted to have a nice way to do word-breaks in a way that the text is nicely distributed.\n\nIn this example, both of the texts are fit inside a 300px div. But the first line-wraps once the text reaches the border of the div, the second add a line-break before reaching the end of the div so the two lines are balanced.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"example(\n \"bad\",\n html`

This is a multiline text placed inside a 300px div

`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"example(\n \"good\",\n html`

This is a multiline text
placed inside a 300px div

`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`## How do we do that\n\nIn the example above, the line-break is added manually, but we want to do it automatically. It requires us to have two informations:\n1. The size of the containing block\n2. the length of the text we try to fit.\n\nThe we define 2 cases:\n- either the text fits into one line, no breaks needed,\n- either it overflows and then we need to add ${tex`n`} lines depending on the number of lines it will occupy\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"function computeN(blockWidth, textWidth) {\n if (textWidth <= blockWidth) return 1; // no linebreaks needed\n\n return Math.ceil(textWidth / blockWidth);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"computeN(300, 500)","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"md`Now that we know how many parts we have, we define a function which breaks a line in \"equal\" parts.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"function computeBreakWidth(blockWidth, textWidth) {\n return Math.ceil(textWidth / computeN(blockWidth, textWidth));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"computeBreakWidth(300, 700)","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`Now we can either break knowing the number of breaks the text needs, or the width it is allowed to have.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"function* badCalculate(el, text) {\n yield el; // we \"blink\" the element to get it's inner width\n const intElemClientWidth = el.clientWidth;\n const textWidth = Math.ceil(measure(text, getUsedFont(el)));\n const mw = computeBreakWidth(intElemClientWidth, textWidth);\n const ht = html`

${text}

`;\n\n ht.value = { mw, textWidth, intElemClientWidth };\n yield ht;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"badCalculate(\n html`

`,\n \"This is a multiline text placed inside a 300px div\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"md`As you can see, we can't just break with the width because characters have not the same width and cause strange behaviours.\nWe need to setup a finer way to break the lines. A soft bound of some sorts.\n\nWe will proceed as so :\n1. find a space character near where we want to line-break (the middle). We assume that half of the characters equals to half the width (even if the characters don't have the same width)\n2. if the space is too far away (more than 20% of the new width), then we hyphenate`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"calculate(300, \"This is a multiline text placed inside 300px\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":347,"value":"md`Calling functions in observable is weird, so here is a templateString: \\`htmlg\\`\n\nIt works like so :\n\n\\`\\`htmlg\\`

\\${\"This is a multiline text placed inside a 300px div\"}

\\` \\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"{\n const el = htmlb`

${\"This is a multiline text placed inside a 300px div\"}

`;\n yield el;\n el.update();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"md`\n> What if I want define the width by myself and not be bound by the element width ? \n> -- imaginary person asking weird questions\n\n\nYou can do so by adding a number as a \\`\\${parameter}\\` into the literal :\n\n\\`\\`htmlg\\`

\\${\"This is a multiline text placed inside a 300px div\"}

\\` \\`\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"htmlb`

${\"This is a multiline text placed inside a 300px div\"}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":580,"value":"md`> What if I have an element which is dependent on the content it has eg: flexbox. In that case what I want is to gracefully place the text only if it is wrapped because the container is too small. \n> -- imaginary person asking my questions\n\nWe can just change the way \\`htmlb\\` is calculating the width : \n- place the text\n- check the width after the text is placed \n- update the text with correct line-breaks\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"example(\n \"bad\",\n html`

${Array(\n 30\n ).join(\n ' hello'\n )}

This is a multiline text placed inside a 300px div

`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"{\n const hello = htmlb`

${Array(30).join(\n ' hello'\n )}

`;\n const small = htmlb`

${\"This is a multiline text placed inside a 300px div\"}

`;\n yield example(\n \"good\",\n html`

${hello}${small}

`\n );\n hello.update();\n small.update();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":782,"value":"md`## Caevats\n\nThe problem is that I can't update as soon as the DOM element is displayed, for now, I'm using \\`update()\\` but I wish I could use something neater... `","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"md`## Inner workings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"md`If you have a better idea than using a generator leave a comment :)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"{\n const fr = htl.fragment`This is a multiline text
placed inside a 300px div`;\n const el = html`

`;\n el.append(fr);\n return el;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":603,"value":"mutable debug = ({})","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"import { measure } from \"@stardisblue/measure-text\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"import { html as htl } from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`## Utility functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"function getUsedFont(el) {\n const cs = window.getComputedStyle(el);\n return {\n font: cs\n .getPropertyValue(\"font-family\")\n .split(',', 1)[0]\n .replaceAll('\"', \"\"),\n size: +cs.getPropertyValue(\"font-size\").replaceAll('px', \"\")\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"function example(icon, content) {\n return html`

${icons[icon]}

${content}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"icons = ({ good: '✔️', bad: '❌' })","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}