31:T7f1,# Notes and background Back in the day, NPR Visuals and Vox both made word-image ("meme") generator tools. NPR's was turned into a package called Lunchbox. These tools serve a critical media need, but they're now technologically out of date. They were blessedly low on infrastructure requirements, but still necessitated static hosting. They also tended to struggle with high-resolution output and custom fonts, particularly when trying to combine the two. Here's an attempt at a more modern version. We're developing it on Observable, which could be a good solution for small and micro media organizations that rely heavily on third party platforms. Using Observable's embed mechanism, it's possible to inject into an existing site infrastructure. If it works well, The Marshall Project may consider adapting the tool to our graphics rig and hosting as an internal page in our CMS. This version draws pure SVG, then uses the excellent [canvg](https://github.com/canvg/canvg) to rasterize the SVG. Currently, it barely works but is functional enough to prove the concept. Hacking on this could be a fun team exercise for The Marshall Project data + digital teams. **Fork this notebook, make some fixes, and merge it back!** Features/requirements + TODOs: * **Custom font support**: Fully operational. * **High resolution output (oversampling)**: Fully operational, but poorly factored. * **Functional word wrapping**: Operational. * **Embedded images such as logos**: This works, but it disappears from the preview. * **Flexible layout/card elements**: This could be hard because of the SVG drawing mechanism; however if it's well documented, should be quite easy for someone skilled at SVG to adapt. * **Smart text fitting and aspect ratio**: This mostly works, though the layout is poorly factored. * **Reconcile new-school input styling with color picker input styling**: The color picker comes from Jeremy Ashkenas' library, and isn't nearly as slickly styled as the new standard library inputs provided by Observable. 32:T54a,// Render the svg quoteSvg = { if (!fontsLoaded) { return html`

Awaiting fonts...

`; } const svg = d3 .create("svg") .attr("width", renderedWidth) .attr("height", renderedHeight); // Explicitly set a background rectangle to effectively set a background // color. Otherwise, the rasterizer makes a transparent background. const bg = svg .append("rect") .attr("width", renderedWidth) .attr("height", renderedHeight) .attr("fill", backgroundColor); svg .append("g") .append("text") .attr("font-size", `${renderedQuoteSize}px`) .attr("fill", textColor) .attr("font-family", "Orelega One, sans-serif") .attr("x", (d) => renderedPadding) .attr("y", (d) => renderedQuoteSize + renderedPadding) .selectAll("tspan") .data(quoteLines) .join("tspan") .attr("x", (d) => renderedPadding) .attr("y", (d) => renderedQuoteSize + renderedPadding) .attr("dx", 0) .attr("dy", (d, i) => i * renderedLineHeight) .text((d) => d); svg .append("g") .append("text") .attr("font-size", `${renderedQuoteSize}px`) .attr("fill", textColor) .attr("font-family", "Orelega One, sans-serif") .attr("x", (d) => renderedPadding) .attr("y", (d) => renderedHeight - renderedPadding) .text((d) => `— ${quoteAuthor}`); return svg.node(); }33:[{"id":"05342f71ccd252db17e2cc4b89ca810b295298e338118a157d9179d1ef30b76ffe75d0a5b57374b96122848875f6a95113da9a8ffb86224c5a6ba3e7deb2b11d","href":"https://static.observableusercontent.com/files/05342f71ccd252db17e2cc4b89ca810b295298e338118a157d9179d1ef30b76ffe75d0a5b57374b96122848875f6a95113da9a8ffb86224c5a6ba3e7deb2b11d","name":"tmp-logo.png","type":"image/png","lastModified":1627840607420.949,"size":1078}] 2f:{"title":"Social card builder - Observable edition","cells":[{"id":0,"value":"md`# Social card builder - Observable edition\n\nModern version of a handy old newsroom tool.\n\n**Note: Logo in preview is buggy.** The watermark logo sometimes disappears and reappears in the preview, but it always shows up in the download.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"

${canvasImage}

\n","pinned":false,"hidden":false,"mode":"html"},{"id":370,"value":"downloadButton = DOM.download(\n rasterize(canvasImage),\n downloadFilename,\n `Download ${downloadFilename}`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof quoteText = Textarea({\n label: \"Text\",\n rows: 5,\n value: `I watched the shadow of our plane hastening below us across hedges and fences, rows of poplars and canals … Nowhere, however, was a single human being to be seen.`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"viewof quoteAuthor = Text({\n label: \"Attribution\",\n value: `W.G. Sebald`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"viewof backgroundColor = color({ value: \"#d8572c\", title: \"Background color\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"viewof textColor = color({ value: \"#ffffff\", title: \"Text color\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"viewof quoteSize = Inputs.range([8, 80], {\n value: 32,\n step: 1,\n label: \"Font size (px)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"viewof lineHeightMult = Inputs.range([0, 2.5], {\n value: 1.5,\n step: 0.1,\n label: \"Line height\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"viewof padding = Inputs.range([0, 50], {\n value: 40,\n step: 1,\n label: \"Padding (px)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"viewof baseWidth = Inputs.range([400, 1200], {\n value: 800,\n label: \"Base width\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":916,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":458,"value":"md`# Rendering configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"downloadFilename = `${slugify(\n quoteText\n .toLowerCase()\n .split(\" \")\n .slice(0, 5)\n .join(\"-\")\n)}.png`","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"sizeMultiplier = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"renderedWidth = Math.round(baseWidth * sizeMultiplier)","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"renderedHeight = Math.round((quoteLines.length + 1) * renderedLineHeight) +\n renderedPadding * 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"renderedQuoteSize = quoteSize * sizeMultiplier","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"renderedLineHeight = lineHeightMult * renderedQuoteSize","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"renderedPadding = padding * sizeMultiplier","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"lineHeight = quoteSize * lineHeightMult","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"md`# Render SVG & canvas for card`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"// Convert SVG to canvas\ncanvasImage = {\n const canvas = DOM.canvas(renderedHeight, renderedWidth);\n const ctx = canvas.getContext(\"2d\");\n const v = canvg.Canvg.fromString(ctx, serialize(quoteSvg));\n v.start();\n ctx.drawImage(\n logo,\n Math.round(canvas.width - renderedPadding - renderedLineHeight),\n Math.round(canvas.height - renderedPadding - renderedLineHeight),\n Math.round(renderedLineHeight),\n Math.round(renderedLineHeight)\n );\n yield canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":709,"value":"logo = FileAttachment(\"tmp-logo.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1016,"value":"mutable fontsLoaded = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":992,"value":"// Inspired by https://observablehq.com/@grantcuster/minimal-font-loading-test\n{\n var font = new FontFaceObserver(\"Orelega One\");\n font.load().then(\n () => {\n mutable fontsLoaded = true;\n },\n () => {\n console.log(\"Font is not available\");\n }\n );\n return \"Fonts loaded.\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":961,"value":"// // Load fonts\nhtml`\n \n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"// This simply supresses the display of the giant-ass SVG.\nhtml`

${quoteSvg}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"// Notebook styles\nstylesheet = html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"md`# Utilities\n\nSerialize SVG to string for rasterization by canvg, rasterize to blob for download.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"serialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n\n const serializer = new window.XMLSerializer();\n return serializer.serializeToString(svg);\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"// Adapted from https://observablehq.com/@aboutaaron/cluster-visualization\nrasterize = (canvas) => {\n let resolve, reject;\n const promise = new Promise((y, n) => ((resolve = y), (reject = n)));\n canvas.toBlob(resolve);\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"quoteLines = {\n if (!fontsLoaded) {\n return [\"Fonts not loaded\"];\n }\n\n const max_width = baseWidth - 2 * padding;\n\n // word parameters\n let words = quoteText.split(/\\s+/).reverse(),\n word,\n line = [],\n lines = [],\n line_number = 0;\n\n // loop through all words and make new lines when we exceed our max_width\n while ((word = words.pop())) {\n line.push(word);\n const line_width = measure_width(line.join(\" \"));\n if (line_width > max_width) {\n line.pop();\n lines.push(line.join(\" \"));\n line = [word];\n }\n }\n\n // Clean up last line\n lines.push(line.join(\" \"));\n return lines;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"measure_width = {\n const context = document.createElement(\"canvas\").getContext(\"2d\");\n context.font = `${quoteSize}px \"Orelega One\"`;\n return (text) => {\n return context.measureText(text).width;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"md`# Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"import { color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table} from \"@observablehq/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {\n wrap_text,\n wrap_text_nchar\n} from \"@ben-tanen/svg-text-and-tspan-word-wrapping\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"slugify = require(\"slugify\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"canvg = require('canvg@3.0.7/lib/umd.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"FontFaceObserver = require(\"https://bundle.run/fontfaceobserver@2.1.0\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}