2f:[] 2d:{"title":"Scoring the Typographic Surface","cells":[{"id":0,"value":"md`# Scoring the Typographic Surface`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"md`Standard html on the web reduces\nall so-called ‘white-space’ to a single space, \nusually explicitly or implicitly preceded by \none \\`

\\` tag, or else enclosed in a pair of them: \n\\`

\\` (better form).\nThis bit of MarkDown is actually also generating \n\\`

\\` tagged paragraphs. This one and ...\n\nParagraph the second, this one.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"html`

Here’s a demo1 that changes that way your browser styles a particular paragraph:

This is (part of) what we typed into the code for this cell:

\nHere’s the same kind of thing\nbut in actual html and written out in lines\nlike   ....    wait for it:\n                                                poetry\n

And here’s what gets rendered by default or when ‘default’ is selected below:

Here’s the same kind of thing\nbut in actual html and written out in lines\nlike .... wait for it:\n poetry

Now select a different style for the paragraph immediately above: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"viewof demo1select = Select([\"default\", \"verse\"], {\n label: \"Select your style:\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"{\n if (demo1select == \"default\")\n // mutable demo1style is a cell toward the end of this notebook\n mutable demo1style = html``;\n else\n mutable demo1style = html``;\n return \"Code in this cell changes the style of a paragraph with id='demo1' depending on your selection.\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"md`---\nIn fact – ***demo2*** – we can use CSS to change the style of all the paragraphs in a notebook = webpage by setting the style of all \\`

\\` tags rather than just one with a particular id='demo1', for example. Select below to change all paragraphs on this notebook:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"viewof demo2select = Select([\"default\", \"most

s set as verse & in RED\"], {\n label: \"Select your style:\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"{\n if (demo2select == \"default\")\n // mutable demo1style is a cell toward the end of this notebook\n mutable demo2style = html``;\n else\n mutable demo2style = html``;\n return \"This cell changes all paragraphs on this page depending on your selection.\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"md`---\nIt would be good (for poets and/or writers who like to have control over lineation) to have a \\`\\` tag-pair to use in html so that everything inside the tags would preserve white-space.\n\nIt turns out that we can define and register such custom tags on a webpage but (to help avoid ambiguity) such tags have to have a hyphen in their name. So now we’ve made a custom tag-pair for this: \\`\\`. We install it by adding two cells to our notebook, first:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"import { verseTag } from \"@dla/imports\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"md`And then, because the code will only run in an Observable notebook if it is referenced, we must add at least one cell that does this. (The message it returns just lets us know that the new tag is registered and ready to use.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"verseTag","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`

Now – we use \\`html\\` for this – we can input and arrange text such that white-space is preserved:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"html`and no, no\n return to un\nreturning, to tell\n no,\nto tell no\n one\n\nthe last or just\n my own\nreturn\n to\n no one\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":431,"value":"md`

We can even style our custom tag. Use the Selectors below.\nSample text within verseTags\n

(Source Serif Pro is the Observable notebook default, by the way.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"viewof fontSelection = Select(\n [\n \"Source Serif Pro\",\n \"Arial\",\n \"Verdana\",\n \"Helvetica\",\n \"Tahoma\",\n \"Trebuchet MS\",\n \"Times New Roman\",\n \"Georgia\",\n \"Garamond\",\n \"Courier New\",\n \"Brush Script MT\"\n ],\n { label: \"Choose a font:\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"viewof sizeSelection = Select([20, 12, 17, 24], {\n label: \"Choose a font-size:\",\n placeholder: 17\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"md`Our styling for the font-family of our \\`\\` tags is set here:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"md`---\nAt this point we realize that, having written our spatialized poem, what we may now want to do is animate it. After all, we have computers; our readers have computers. But our computers need to know where we put the words on the surface or ‘page’ of our compositions and then remember and reproduce these positions or perhaps even change them over time. Whereas \\`html\\`, by default, doesn’t want to do anything except render our poetically spaced work as a clumped paragraph of prose.\n\nSo now we must figure out how to capture the relative word positions in an open field poetic arrangement and then also play it back, word-by-word, say.\n\nWe could do this at a calculated pace – say, one word every second – and we could also use ‘alignment’ (or timestamping) data that has been extracted from a service like [reduct.video](https://reduct.video).\n\n---\nHere we go ...\n### Adding Animations for Spatialized Typography\nWe put our poetic composition in an \\`html\\` cell named \\`verseText\\` :\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"verseText = html`and no, no\n return to un\nreturning, to tell\n no,\nto tell no\n one\n\nthe last or just\n my own\nreturn\n to\n no one`","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"md`Then we feed this verse element of \\`html\\` through an \\`addSpans()\\` method that renders its calculations in the following cell called \\`verseSpanned\\`. This will contain the same text (and white-space) but with \\`\\` tags around each word:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"verseSpanned = html`${addSpansTo(verseText)}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":475,"value":"md`Now we can get the values for \\`offsetLeft\\` (in calculated \\`vw\\`) and \\`offsetTop\\` (in \\`px\\`) from each of the \\`\\` elements, and put them in an \\`Array\\` returned by our \\`wordOffsets()\\` method:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"offsets = wordOffsets(verseSpanned)","pinned":true,"hidden":false,"mode":"ojs"},{"id":598,"value":"md`In production, what this means is that we should spatialize our text in the font and font-size that we plan to animate, using **spaces only** for the composition. We could do this in a word processor for example. Then, in a fork of this notebook, we would set up the same font and font-size – before, and in order to generate the offsets. Then we paste our word-processed text, as composed, into the \\`verseText\\` cell. The code does the rest.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"md`---\nFinally, for this notebook, here is quick-and-dirty code (you’ll have to root around to find it) to display the above fragment of poetry, in the positions determined by \\`verseText\\` and, **if you change font or font-size**, after being sure to RUN the \\`verseSpanned\\` cell. Once this is done, the positions are set and we can click \\`Play\\`:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"viewof play = Button(\"Play\", {\n reduce: () => {\n loop();\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"html`

\n${makeStyledSpansFrom(verseSpanned)}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"md`## Functions etc.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"addSpansTo = verseElem => {\n // ensure that verseTag is registered:\n verseTag;\n let newText = ``;\n let text = verseElem.innerHTML;\n let wordStart = text.search(/\\S/); // nonwhitespace\n while (wordStart != -1) {\n newText += text.substr(0, wordStart);\n text = text.substr(wordStart);\n let wordEnd = text.search(/\\s/); // whitespace\n if (wordEnd == -1) wordEnd = text.length; // text ends with nonwhitespace\n newText += `` + text.substr(0, wordEnd) + ``;\n text = text.substr(wordEnd);\n wordStart = text.search(/\\S/);\n }\n return `${newText}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"wordOffsets = verseSpans => {\n let array = [];\n if (verseSpans == ``) return array;\n let vw = document.documentElement.clientWidth;\n let nodes = Array.from(verseSpans.children);\n nodes.forEach((node, index) => {\n if (node.offsetLeft != undefined) {\n array.push([(node.offsetLeft / vw) * 100, node.offsetTop]);\n }\n });\n return array;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"mutable demo1style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":366,"value":"mutable demo2style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":632,"value":"loop = async () => {\n for (let j = 0; j < 2; j++) {\n for (let i = 0; i < offsets.length; i++) {\n await scorepause(\"u\" + i);\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"scorepause = async span => {\n return await Promises.delay(1000).then(() => {\n let theElem = document.getElementById(`${span}`);\n theElem.classList.toggle('visible');\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"makeStyledSpansFrom = spannedVerse => {\n let s = ``;\n let spans = Array.from(spannedVerse.children);\n spans.forEach((span, index) => {\n if (span.offsetLeft != undefined) {\n let offl = offsets[index][0];\n let offt = offsets[index][1];\n s += `${span.innerText}`;\n }\n });\n return s;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":683,"value":"mutable spans = ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":611,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":333,"value":"import { Button, Select, Text } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}