30:T790,viewof md_content = textarea({ title: "Content (in markdown)", placeholder: "Insert content here", width: "100%", rows: 10, value: `# As I Lay Dying by William Faulkner ## Darl Jewel and I come up from the field, following the path in single file. Although I am fifteen feet ahead of him, anyone watching us from the cotton-house can see Jewel’s frayed and broken straw hat a full head above my own. The path runs straight as a plumb-line, worn smooth by feet and baked brick-hard by July, between the green rows of laid-by cotton, to the cotton-house in the centre of the field, where it turns and circles the cotton-house at four soft right angles and goes on across the field again, worn so by feet in fading precision. The cotton-house is of rough logs, from between which the chinking has long fallen. Square, with a broken roof set at a single pitch, it leans in empty and shimmering dilapidation in the sunlight, a single broad window in two opposite walls giving on to the approaches of the path. When we reach it I turn and follow the path which circles the house. Jewel, fifteen feet behind me, looking straight ahead, steps in a single stride through the window. Still staring straight ahead, his pale eyes like wood set into his wooden face, he crosses the floor in four strides with the rigid gravity of a cigar-store Indian dressed in patched overalls and endued with life from the hips down, and steps in a single stride through the opposite window and into the path again just as I come around the corner. In single file and five feet apart and Jewel now in front, we go on up the path toward the foot of the bluff. Tull’s wagon stands beside the spring, hitched to the rail, the reins wrapped about the seat stanchion. In the wagon-bed are two chairs. Jewel stops at the spring and takes the gourd from the willow branch and drinks. I pass him and mount the path, beginning to hear Cash’s saw.` })31:Ta3b,draw = ctx => { ctx.clearRect(0, 0, width, height); let columns = Math.floor(width / column_target); let gutter = lh; let cstep = width / columns; let column_offset = lh / 2; if (show_grid) { ctx.fillStyle = "#ddd"; for (let c = 0; c < columns; c++) { ctx.fillRect(c * cstep + column_offset, 0, cstep - gutter, height); } } let rows = Math.floor(height / lh); let row_offset = (height - rows * lh) / 2; if (show_grid) { ctx.strokeStyle = "black"; ctx.lineWidth = 1; for (let r = 0; r < rows; r++) { let y = r * lh + row_offset; ctx.strokeRect(1, y, width - 2, lh); } } ctx.textBaseline = "middle"; ctx.font = "normal 16px Inter UI"; ctx.fillStyle = "#000"; let cells = []; for (let c = 0; c < columns; c++) { for (let r = 0; r < rows; r++) { cells.push(null); } } function getIndex(column, row) { return column * rows + row; } function getColumnRow(index) { let row = index % rows; let column = Math.floor(index / rows); return [column, row]; } let cell_counter = 0; for (let e = 0; e < ast.children.length; e++) { let elem = ast.children[e]; if (elem.type === "paragraph") { ctx.font = `normal ${font_size}px Inter UI`; for (let n = 0; n < elem.children.length; n++) { let node = elem.children[n]; if (node.type === "text") { let lines = wrapText(ctx, node.value, lh, cstep - gutter, true); for (let l = 0; l < lines.length; l++) { let index = n + l; let column = Math.floor(cell_counter / rows); let x = column * cstep + column_offset; if (l === 0) { x = x + lh; } let row = cell_counter % rows; let y = row * lh + lh / 2 + row_offset; ctx.fillText(lines[l][0], x, y); cell_counter++; } } } } else if (elem.type === "heading") { for (let n = 0; n < elem.children.length; n++) { ctx.font = `normal ${font_size}px Inter UI`; let node = elem.children[n]; if (node.type === "text") { let lines = wrapText(ctx, node.value, lh, cstep - gutter); for (let l = 0; l < lines.length; l++) { let index = n + l; let column = Math.floor(cell_counter / rows); let x = column * cstep + column_offset; let row = cell_counter % rows; let y = row * lh + lh / 2 + row_offset; ctx.fillText(lines[l][0], x, y); cell_counter++; } } } } } }32:[] 2e:{"title":"Layout Grid","cells":[{"id":0,"value":"md`# Layout Grid`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`More experiments in converting markdown to a grid layout using canvas. I'm thinking this could lead to doing some cool procedural layout stuff in the future, but right now it's mostly about reimplementing the basics. I do like that I was able to get this baseline grid + column set-up working *exactly* the way I wanted it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"canvas = {\n let canvas = document.createElement(\"canvas\");\n let dpr = window.devicePixelRatio || 1;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = width + \"px\";\n canvas.style.height = height + \"px\";\n let ctx = canvas.getContext(\"2d\");\n ctx.scale(dpr, dpr);\n draw(ctx);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"viewof show_grid = checkbox({\n options: [{ value: \"show\", label: \"Show grid\" }],\n value: \"show\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"viewof font_size = slider({\n min: 4,\n max: 24,\n step: 1,\n value: 16,\n title: \"Font size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"viewof line_height = slider({\n min: 1,\n max: 2,\n step: 0.1,\n value: 1.4,\n title: \"Line height\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"viewof column_target = slider({\n min: 100,\n max: 600,\n step: 10,\n value: 200,\n title: \"Column minimum width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"function wrapText(ctx, text, lh, width, is_indented) {\n let words = text.split(\" \");\n let lines = [];\n let maxWidth = width;\n let indent_width = width - lh;\n let line = \"\";\n let x = 0;\n let y = 0;\n for (let n = 0; n < words.length; n++) {\n let testLine = n === 0 ? line + words[n] : line + \" \" + words[n];\n let metrics = ctx.measureText(testLine);\n let testWidth = metrics.width;\n let active_width = maxWidth;\n if (is_indented && lines.length === 0) active_width = indent_width;\n if (testWidth > active_width && n > 0) {\n lines.push([line, x, y]);\n line = words[n];\n y += lh;\n } else {\n line = testLine;\n }\n }\n lines.push([line, x, y]);\n return lines;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"ast = remark.parse(md_content)","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"lh = font_size * line_height","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"css = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"import {checkbox, textarea, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"remark = require(\"https://bundle.run/remark@10.0.1\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}