2b:null 2c:["$","title",null,{"children":"✍️ SVG Multiline Text | Jakob Listabarth | Observable"}] 31:Tb03,class SVGMultilineTextElement { constructor( text, width = 200, fontSize = 12, leading = 1.2, options = { debug: false } ) { this.text = text; this.width = width; this.fontSize = fontSize; this.leading = leading; this.debug = options.debug; this.textElement = d3.create("text"); this.lines = this.getLines(); } getWords() { return this.text.split(" "); } getLineDimensions(lineText) { const container = d3.select("body").append("svg"); const textElement = container.append("text"); textElement.text(lineText).attr("font-size", this.fontSize); const width = textElement.node().getComputedTextLength(); const height = textElement.node().getExtentOfChar(0).height; container.remove(); return { width, height }; } getHeight() { const lineHeight = this.getLineDimensions(this.lines[0]).height; return lineHeight * this.leading * (this.lines.length - 1); } getDebugGuide() { return svg``; } hasTextOverflow() { const lastWord = this.getWords().slice(-1)[0]; const lastRenderedWord = this.lines.flat().slice(-1)[0]; return lastWord != lastRenderedWord; } // TODO: add when fixed height can be set // getTextOverflowIndicator() { // if (!this.hasTextOverflow()) return; // return svg` // // // + // `; // } getLines() { const line = []; const lines = []; const words = this.getWords(); words.forEach((word, idx) => { line.push(word); const lineText = line.join(" "); if (this.getLineDimensions(lineText).width > this.width) { const overflowingWord = line.pop(); lines.push(line.slice()); line.length = 0; line.push(overflowingWord); if (idx + 1 == words.length) lines.push(line.slice()); } if (idx + 1 == words.length && line.length > 1) lines.push(line.slice()); // TODO: refactor this (less if conditions, more intiuitiv approach 🤷‍♂️) }); return lines; } node() { const tspans = this.lines.map( (line, i) => svg`${line.join(" ")}` ); return svg` ${this.debug ? this.getDebugGuide() : ""} ${tspans} `; } }32:[] 2f:{"id":"a7923a263f3d8908","slug":null,"title":"✍️ SVG Multiline Text","thumbnail":"a793fbf4f8b3a973937da76fb336300d9009ef7ced285e8cba7f2f36df184e7c","access_level":"public","create_time":"$D2022-12-04T22:36:09.892Z","update_time":"$D2023-01-03T10:35:02.519Z","view_time":null,"first_public_time":"$D2022-12-04T22:36:25.378Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"012b0b3e382a554e","login":"jakoblistabarth","name":"Jakob Listabarth","avatar_url":"https://avatars-next.observableusercontent.com/9729178963e994d34cfa91cdd1320563920ead897b5f1934136a47a96b83bd9d","tier":"starter_2024"},"version":500,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"46e29826d3649e64","login":"jakoblistabarth","name":"Jakob Listabarth","avatar_url":"https://avatars-next.observableusercontent.com/a0e873c9f95e3800e63d3dcbbf26fd397ec65968ac816531408eda0ff84da48f","tier":null}],"members":[{"type":"individual","id":"46e29826d3649e64","login":"jakoblistabarth","name":"Jakob Listabarth","avatar_url":"https://avatars-next.observableusercontent.com/a0e873c9f95e3800e63d3dcbbf26fd397ec65968ac816531408eda0ff84da48f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"✍️ SVG Multiline Text","cells":[{"id":0,"value":"# ✍️ SVG Multiline Text","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"todoList([\n { title: \"refactor getLine() method\", done: false },\n {\n title: \"fix getLine() to consider last word in all cases\",\n done: true\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"viewof textWidth = Inputs.range([300, width - 1], { label: \"Width\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"viewof textFontSize = Inputs.range([3, 100], {\n label: \"Fontsize\",\n value: 16,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"viewof textLeading = Inputs.range([0.25, 5], {\n label: \"Leading\",\n value: 1.2,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"viewof textString = Inputs.textarea({ label: \"Text\", value: lorem, rows: 8 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"viewof toggleGuides = Inputs.toggle({ label: \"Show guides\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"demo = {\n const demo = new SVGMultilineTextElement(\n textString,\n textWidth,\n textFontSize,\n textLeading,\n {\n debug: toggleGuides\n }\n );\n const height = demo.getHeight();\n return html`\n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"demoImperative = {\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", 300);\n svg.call(multiLineText, textString, {\n width: textWidth,\n fontSize: textFontSize,\n leading: textLeading,\n options: { debug: toggleGuides }\n });\n const text = svg.select(\"text\");\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"demoDefaults = {\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", 300);\n svg.call(multiLineText, textString);\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":238,"value":"multiLineText = (selection, text, mlOptions = {}) => {\n const { width, fontSize, leading, options } = mlOptions;\n const textElement = new SVGMultilineTextElement(\n text,\n width,\n fontSize,\n leading,\n options\n );\n selection.append(() => textElement.node());\n return { node: textElement.node(), height: textElement.getHeight() };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"### 🚧 Pseudo code for getLine() method\n\nSplit words into lines of desired length, based on the rendered linelength.\n\n```\nloop over every word\n\n add word to line\n\n get linelength\n\n if line length too long\n\n remove overflowing word from line\n push (now fitting) line to lines\n create new line\n add overflowing word to new line\n\n if word is last word\n push new line to lines\n\nrerturn all lines\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"lorem = \"Scalable Vector Graphics (SVG) are an XML-based markup language for describing two-dimensional based vector graphics. As such, it's a text-based, open Web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including CSS, DOM, JavaScript, and SMIL. SVG is, essentially, to graphics what HTML is to text. SVG images and their related behaviors are defined in XML text files, which means they can be searched, indexed, scripted, and compressed. Additionally, this means they can be created and edited with any text editor or with drawing software.\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":478,"value":"import { todoList } from \"@jakoblistabarth/todo-list\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"