2d:null 2e:["$","title",null,{"children":"Responsive poetry | Brady Sheridan | Observable"}] 33:T465,viewof demo = { const INITIAL_FONT_SIZE = 24 let fontSize = INITIAL_FONT_SIZE, fontFamily = 'serif', interval, targetFontSize const poem = html`

${myShittyPoem}

Font size:

${fontSize.toFixed(1)}px

` poem.querySelector("[type=button]").onclick = () => restart() function restart() { clearInterval(interval) targetFontSize = fit(myShittyPoem, document.getElementById('poem-wrap'), fontSize, fontFamily) fontSize = INITIAL_FONT_SIZE interval = setInterval(iterate, 5) } function iterate() { if (fontSize > targetFontSize) { fontSize -= 0.01 document.getElementById("poem-wrap").style['font-size'] = `${fontSize}px` document.getElementById("displayed-font-size").innerHTML = `${fontSize.toFixed(1)}px` } } return poem; }34:Tbb2,function fit(text, containerEl, initialFontSize, fontFamily) { const PIXEL_RATIO = getPixelRatio(), containerWidth = containerEl.getBoundingClientRect().width, canvas = createHiDPICanvas(containerWidth), context = canvas.getContext('2d'), longestLine = getLongestLine(split(text)) // set an arbitrarily large font size as our starting point for the trial and error check let fontSize = 300 // TO DO: // check if initalFontSize fits // if it does, just return it // if it doesn't, set it as our starting point for trial and error check // console.log('--> initialFontSize =', initialFontSize) // context.font = font(initialFontSize, fontFamily) // if (fits(longestLine)) { return initialFontSize } // else { fontSize = initialFontSize } // console.log('--> fontSize =', fontSize) let fittedFontSize = getFittedFontSize(longestLine) return fittedFontSize // --- helpers ------------------------------------------------- // calculate pixel ratio, which we'll use to to ensure // accurate measurement corresponding to screen resolution // (https://bit.ly/34sGn9D) function getPixelRatio() { let ctx = document.createElement("canvas").getContext("2d"), dpr = window.devicePixelRatio || 1, bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1 return dpr / bsr } // split text into lines function split(text) { return text.split('\n') } // isolate longest line function getLongestLine(lines) { let longest = -1, i lines.forEach((line, ii) => { let lineWidth = context.measureText(line).width if (lineWidth > longest) { longest = lineWidth i = ii } }) return ('number' === typeof i) ? lines[i] : null } // check if specified str fits on canvas function fits(str) { return context.measureText(str).width <= canvas.width } // format font given size and family function font(size, family) { return `${size}px ${family}` } // calculate maximum font size for given text and canvas context function getFittedFontSize(text) { // lower the font size until the text fits the canvas do { fontSize-- context.font = font(fontSize, fontFamily) } while(!fits(text)) // adjust for resolution fontSize /= PIXEL_RATIO return fontSize } // create canvas element to be used for measurement // (PIXEL_RATIO helps us account for all screen resolutions) function createHiDPICanvas(w, h) { let canvas = document.createElement("canvas") canvas.width = w * PIXEL_RATIO canvas.height = h * PIXEL_RATIO canvas.style.width = `${w}px` canvas.style.height = `$0px` canvas.getContext("2d").setTransform(PIXEL_RATIO, 0, 0, PIXEL_RATIO, 0, 0) return canvas } }35:[] 31:{"id":"66fda698f8b2e164","slug":"responsive-poetry","title":"Responsive poetry","thumbnail":"10e604f97c1929f6bcdff6e3dd779edd21ad28195a4de5279719db9f1cc5235c","access_level":"public","create_time":"$D2019-10-31T15:42:36.148Z","update_time":"$D2022-06-08T16:23:40.848Z","view_time":null,"first_public_time":"$D2019-11-03T20:36:29.685Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"c53761f873c0cf85","login":"bradysheridan","name":"Brady Sheridan","avatar_url":"https://avatars-next.observableusercontent.com/eba47f1e12636c97c2b31113a48adef698955cf2d0a1a2f3b8e79dce27f9187f","tier":"starter_2024"},"version":1081,"publish_version":1081,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6be94d5fe1da32d","login":"bradysheridan","name":"Brady Sheridan","avatar_url":"https://avatars-next.observableusercontent.com/5b3e4179948ad2f4395b85f96ea1b025e38d654f49ee7cf2e171f012f03a484c","tier":null}],"members":[{"type":"individual","id":"c6be94d5fe1da32d","login":"bradysheridan","name":"Brady Sheridan","avatar_url":"https://avatars-next.observableusercontent.com/5b3e4179948ad2f4395b85f96ea1b025e38d654f49ee7cf2e171f012f03a484c","tier":null,"role":"editor"}],"comments":[{"id":"7ab89edd5a1533bc","reply_to_id":null,"content":"A BRILLIANT visualization!","create_time":"$D2021-12-01T16:35:00.055Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null}},{"id":"e7a77aed92b316a6","reply_to_id":"7ab89edd5a1533bc","content":"Thanks Mario!","create_time":"$D2022-06-08T15:31:54.592Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"c6be94d5fe1da32d","login":"bradysheridan","name":"Brady Sheridan","avatar_url":"https://avatars-next.observableusercontent.com/5b3e4179948ad2f4395b85f96ea1b025e38d654f49ee7cf2e171f012f03a484c","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"286de25950ae1cc4","slug":"recliner","title":"reclinermag.com","owner":{"id":"c53761f873c0cf85","login":"bradysheridan","name":"Brady Sheridan"}},"type":"notebook","body":{"title":"Responsive poetry","cells":[{"id":0,"value":"md`# Responsive poetry`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"html`

bradysheridan.com reclinermag.com

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"html`I'm working on a website for a literary mag and many of their submissions are poems with odd, deliberate spacing. Handling whitespace is easy at first glance: just wrap the text in pre tags. But a trickier problem comes into play with smaller screens: we can't wrap the text like normal paragraphs because lines need to remain separate, so overflow becomes a glaring issue with poems whose lines vary significantly in length.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`For instance, take a look at this \"poem\":`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"html`

${myShittyPoem}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md`Pretend the red border is the edge of our screen... we can't have that! But we also definitely can't have this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"html`

${myShittyPoem.split('\\n').map(str => `

${str}

`)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"md`We could theoretically just come up with an arbitrarily small font size to use on mobile devices, but this is a shortcut that will often result in text that's smaller than it needs to be. We have to accept that certain poems will have weirdly small text on mobile devices, but we can at least ensure that the small text is as big as possible.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"md`So, what to do! Fortunately, HTML canvas elements have a built-in [measureText](https://www.w3schools.com/tags/canvas_measuretext.asp) function that allows us to see how much space our text will occupy before actually rendering it. The plan is to isolate the longest line in the poem, calculate its maximum font size using an off-screen canvas element, and then apply that font size to the rest of the piece. Let's do it!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"md`(1) Split the poem into lines`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"lines = myShittyPoem.split('\\n')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"md`(2) Isolate the longest line`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"longestLine = (function(lines) {\n let longest = -1, i\n\n lines.forEach((line, ii) => {\n if (line.length > longest) {\n longest = line.length\n i = ii\n }\n })\n\n return ('number' === typeof i) ? lines[i] : null\n})(lines)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"md`(3) Calculate the max font size of the longest line by starting with an arbitrarily large font size and shrinking it unil the text fits the hidden canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"md`Our poem now scales to fit its container—all we need to do is invoke the fit function whenever the window is resized and we're cooking with responsive fire!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"md`### To Do\n- Step 1 of the fit function should be to check if the current font size of the document fits.\n- [DONE, yes this is necessary] Isolating longest line... even necessary? Check if canvas elements can preserve whitespace the same way that pre tags do. If so, you can just measure the width of the whole piece.\n- [DONE] Measure width of each line in pixels instead of using char count—not all chars are created equal in terms of length!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`\n\n\n### Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"myShittyPoem = `Here's a short line\nThis line appears to be the longest in terms of characters\n Actually longest due to whitespace!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"width = 400\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"height = 90","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"PIXEL_RATIO = getPixelRatio()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"function createHiDPICanvas(w, h) {\n let can = document.createElement(\"canvas\")\n can.width = w * PIXEL_RATIO\n can.height = h * PIXEL_RATIO\n can.style.width = `${w}px`\n can.style.height = `${h}px`\n can.style.border = '1px dashed green'\n can.getContext(\"2d\").setTransform(PIXEL_RATIO, 0, 0, PIXEL_RATIO, 0, 0)\n return can\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"function getPixelRatio() {\n let ctx = document.createElement(\"canvas\").getContext(\"2d\"),\n dpr = window.devicePixelRatio || 1,\n bsr = ctx.webkitBackingStorePixelRatio ||\n ctx.mozBackingStorePixelRatio ||\n ctx.msBackingStorePixelRatio ||\n ctx.oBackingStorePixelRatio ||\n ctx.backingStorePixelRatio || 1\n return dpr / bsr\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"