2d:null 2e:["$","title",null,{"children":"Markdown to grid | Grant Custer | Observable"}] 33:T6b1,md_content = `# This grid was layed-out using canvas to measure text I just have this image in here to see how that could look. ![cherry blossoms](https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/cherry-blossoms-unsplash.jpg) ## What is this? This is a messy proof on concept showing a workflow from markdown => to a grid layout. It uses canvas to measure text in paragraphs, this lets you split text across grid cells for a column effect (something I think is currently impossible to do otherwise). It does layout as HTML so you get stuff like selectable text. It uses Remark to parse markdown and then goes transforms the AST. We use the AST rather than transforming all the way into HTML because we want to do some custom stuff for different types of elements. Probably in practice I would use React with element specific components. As far as the actual layout for the cells this just floats them all left -- since you know the width and height it would be easy to do something more interesting. I would probably use absolute positioning -- using React you could have the screen size come down and use that to set up all your relevant grid stuff with math. This would give you more control than CSS grid. ## More paragraph layout examples Paragraphs that are next to eachother get bundled together. I keep the info about which line was the new paragraph line. So I could do something with those like indent them, I just didn't do it in this example. They do always get a new line though. ## Will I do more This was inspired by some other canvas stuff I did and looking through Müller-Brockman's grid design book. I might try some more ambitious stuff. There's a lot of edge cases to handle, though.`34:[] 31:{"id":"3caa000e5604a884","slug":"markdown-to-grid","title":"Markdown to grid","thumbnail":"a84f0f6b56f153b83d58eb3bd707c3766e0e564683ffa451591f425b6c517d52","access_level":"public","create_time":"$D2018-11-21T02:13:56.747Z","update_time":"$D2018-11-21T18:37:20.915Z","view_time":null,"first_public_time":"$D2018-11-21T18:21:10.897Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":"starter_2024","bio":"Design and coding @fastforwardlabs. Lately interested in grids. Continually interested in simulations. He/him."},"version":184,"publish_version":184,"role":null,"authored":false,"authors":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null,"bio":"Design and coding @fastforwardlabs. Lately interested in grids. Continually interested in simulations. He/him."}],"members":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"a9b20524fc744bff","slug":"layout","title":"Layout","owner":{"id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer"}},"type":"notebook","body":{"titling":"auto","title":"Markdown to grid","cells":[{"id":0,"value":"md`# Markdown to grid`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"display = html`

\n ${third_pass.map(group => {\n let content = null;\n if (group.type === \"heading\") {\n content = group.grouped[0].content.value;\n } else if (group.type === \"image-holder\") {\n content = `

`;\n } else if (group.type === \"paragroup\") {\n content = group.line_group\n .map(line => `

${line[0]}

`)\n .join(\"\");\n }\n return `

${content}

`;\n })}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"third_pass = {\n let regrouped = [];\n let clean_second = second_pass.slice(0);\n for (let i = 0; i < clean_second.length; i++) {\n let group = clean_second[i];\n if (group.type === \"paragraph\") {\n let lines_to_group = [];\n for (let j = 0; j < group.grouped.length; j++) {\n let paragraph = group.grouped[j];\n let lines = wrapText(paragraph.content.value, column_width);\n lines[0].push(true);\n lines_to_group.push(...lines);\n }\n let row_line_limit = row_height / line_height;\n let group_num = Math.ceil(lines_to_group.length / row_line_limit);\n console.log(group_num);\n for (let j = 0; j < group_num; j++) {\n let line_group = lines_to_group.slice(\n j * row_line_limit,\n j * row_line_limit + row_line_limit\n );\n let new_group = { type: \"paragroup\", line_group };\n regrouped.push(new_group);\n }\n } else {\n regrouped.push(group);\n }\n }\n return regrouped;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"function wrapText(text, width) {\n let canvas = document.createElement(\"canvas\");\n let ctx = canvas.getContext(\"2d\");\n ctx.font = `${font_size}px sans-serif`;\n let words = text.split(\" \");\n let lines = [];\n let maxWidth = width;\n var line = \"\";\n let x = 0;\n let y = 0;\n for (var n = 0; n < words.length; n++) {\n let testLine = n === 0 ? line + words[n] : line + \" \" + words[n];\n let metrics = ctx.measureText(testLine);\n var testWidth = metrics.width;\n if (testWidth > maxWidth && n > 0) {\n lines.push([line, x, y]);\n line = words[n];\n y += line_height;\n } else {\n line = testLine;\n }\n }\n lines.push([line, x, y]);\n return lines;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"font_size = 14","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"line_multiplier = 1.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"line_height = font_size * line_multiplier","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"column_width = line_height * 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"row_height = line_height * 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"second_pass = {\n let groups = [];\n let clean_first = first_pass.slice(0);\n for (let i = 0; i < clean_first.length; i++) {\n let node = clean_first[i];\n if (i === 0) {\n groups.push({ type: node.type, grouped: [node] });\n } else {\n let last_group = groups[groups.length - 1];\n // only group paragraphs for now\n if (node.type === \"paragraph\" && last_group.type === node.type) {\n last_group.grouped.push(node);\n } else {\n groups.push({ type: node.type, grouped: [node] });\n }\n }\n }\n return groups;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"first_pass = ast.children.map(node => {\n let type = node.type;\n let content = {};\n // hack for now\n let child = node.children[0];\n if (child.type === \"image\") {\n type = \"image-holder\";\n content.image = node.children[0];\n } else {\n content.value = node.children[0].value;\n }\n return {\n type,\n content\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"ast = remark.parse(md_content)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"remark = require(\"https://bundle.run/remark@10.0.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 32:"$31:body"