2c:null 2d:["$","title",null,{"children":"P-002 / Text Layout in Monospace | Benjamin | Observable"}] 32:[] 30:{"id":"7b5c81c3fd4a3498","slug":"p-002-text-layout-in-monospace","title":"P-002 / Text Layout in Monospace","thumbnail":"947ee10433bdd13800a7da2b11ca9fce44114393b60bf7268f3a5bdae8ffe9d6","access_level":"public","create_time":"$D2019-12-17T07:28:57.300Z","update_time":"$D2019-12-17T10:42:31.568Z","view_time":null,"first_public_time":"$D2019-12-17T10:09:04.670Z","has_unpublished_edits":null,"fork":{"id":"50dd8070db96e408","slug":"p-001-notebook-series-template","title":"P-001 / Notebook Series Template","owner":{"id":"8a1645a08dfd342c","login":"hastebrot","name":"Benjamin"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8a1645a08dfd342c","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":"starter_2024"},"version":700,"publish_version":700,"role":null,"authored":false,"authors":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null}],"members":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"ee69870548046838","slug":"notebook-series","title":"Notebook Series","owner":{"id":"8a1645a08dfd342c","login":"hastebrot","name":"Benjamin"}},"type":"notebook","body":{"titling":"auto","title":"P-002 / Text Layout in Monospace","cells":[{"id":0,"value":"md`# P-002 / Text Layout in Monospace`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"desc(`Let's see how to layout textspans using absolute positions. ${datespan(\"17 Dec 2019\")}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"{\n const xUnit = fontSize * xFactor\n const yUnit = fontSize * yFactor\n \n const drawTextspans = (text, xOffset, yOffset) => {\n return text.split(\"\").map((char, charIndex) => {\n return svg`${char}`\n })\n }\n \n return svg`\n \n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"note(`${titlespan(\"**Notes:**\")} The layout of normal proportional text involves more calculations than monospaced fixed-width tabular text. Retrieving the bounds (width and height) of elements in HTML, SVG, and Canvas involves additional actions. We can get rid of this requirement by using monospaced text. It also simplifies the calculations since the length of the text string allows us to calculate the width of the text box. Since we don't measure the bounds of the text or single characters we need to make an assumption how big the x and y unit size is. This is using the svg template literal.`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"viewof fontSize = number({ title: \"fontSize\", value: 20, description: \"(in pixels)\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"viewof xFactor = number({ title: \"xFactor\", value: 0.8, description: \"(as factor)\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"viewof yFactor = number({ title: \"yFactor\", value: 1.2, description: \"(as factor)\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"note(\"*Input options, which customize the example.*\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"digitsText = \"0123456789\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"charsText = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"shortText = \"Lorem ipsum dolor sit amet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"longText = \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitationullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velitesse cillum dolore eu fugiat nulla pariatur. Excepteur sintoccaecat cupidatat non proident, sunt in culpa qui officiadeserunt mollit anim id est laborum.\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"note(\"*Input data, which also customize the example.*\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"loadMonospaceStylesheet()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"note(\"*Provides Roboto Mono typeface from Google Fonts.*\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"defaultMonospaceStyle = (fontSize = 20) => `font-size: ${fontSize}px; font-family: roboto mono, monospace; fill: #000;`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"note(\"*Uses default monospace font via HTML style attribute value.*\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"defaultSvgTextStyle = `text-anchor: start; dominant-baseline: hanging;`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"note(\"*Aligns an SVG text element via HTML style attribute.*\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"import { text, textarea, number } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"note(\"*Imports several inputs to customize the example cell.*\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"import { \n desc, note, divider, titlespan, datespan, colorspan,loadMonospaceStylesheet, betterFontSmoothingStyle\n} from \"@hastebrot/p-001-notebook-series-template\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"note(\"*Imports typographic helper functions.*\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"